https://www.victoriaheavenlyspa.com/wp-content/plugins/video-backg…/jquery.background-video.js?ver=1.1.1

1// The MIT License (MIT)
2
3// Copyright (c) 2015 BG Stock - html5backgroundvideos.com
4
5// Permission is hereby granted, free of charge, to any person obtaining a copy
6// of this software and associated documentation files (the "Software"), to deal
7// in the Software without restriction, including without limitation the rights
8// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9// copies of the Software, and to permit persons to whom the Software is
10// furnished to do so, subject to the following conditions:
11
12// The above copyright notice and this permission notice shall be included in all
13// copies or substantial portions of the Software.
14
15// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21// SOFTWARE.
22
23(function($) {
24
25	// Add js class to html
26	$('html').addClass('js');
27
28	// Add IE8 shim for Date.now()
29	if (!Date.now) {
30		Date.now = function() { return new Date().getTime(); }
31	}
32
33	// Return current time in seconds
34	function currentTime() {
35		return Math.floor(Date.now() / 1000);
36	}
37
38	// The plugin
39	$.fn.bgVideo = function( options ) {
40
41		// @bool iOS
42		

42var iOS = /iPad|iPhone|iPod/.test(navigator.platform) || /iPad|iPhone|iPod/.test(navigator.userAgent);
43
44		// Settings
45		var settings = $.extend({}, $.fn.bgVideo.defaults, options );
46
47		// Do the things
48		return this.each(function() {
49
50			// Set some handy variables
51			var $video = $(this); // jQuery Object
52			var video = $video[0]; // DOM node
53			var $container = $video.parent();
54			var $pauseplay = $('<button class="jquery-background-video-pauseplay pause"><span>Pause</span></button>');
55			var start_time; // We'll set this when it starts playing
56
57
58			// Check for any data attributes that will override the settings for this particular element
59			var el_settings = $.extend({}, settings);
60			var data_attrs = $video.data();
61			$.each( data_attrs, function( data_name, data_val ) {
62				if( data_name.indexOf('bgvideo') === 0 ) {
63					// It's a match! Strip the bgvideo prefix and lowercase the first letter
64					data_name = data_name.replace('bgvideo', '');
65					data_name = data_name.charAt(0).toLowerCase() + data_name.slice(1);
66					// Then set the setting
67					el_settings[data_name] = data_val;
68				}
69			});
70
71			
72			// Attach to playing event
73			$video.on('playing', function(){
74				start_time = currentTime();
75				$video.addClass('is-playing is-visible');
76				$pauseplay.removeClass('play').addClass('pause').find('span').text('Pause');
77				$.fn.bgVideo.fitVideo( $video );
78			});
79
80
81			// If the video is already playing before js loads
82			if( video.currentTime > 0 ) {
83				$video.addClass('is-playing is-visible');
84			}
85
86
87			// Attach to pause event
88			$video.on('pause', function(){
89				$video.removeClass('is-playing');
90				$pauseplay.removeClass('pause').addClass('play').find('span').text('Play');
91				if(el_settings.fadeOnPause) {
92					$video.removeClass('is-visible');
93				}
94			});
95
96
97			// Set default styles
98			$container.css({
99				'position': 'relative',
100				'overflow': 'hidden',
101				'background-size': 'cover',
102				'background-position': 'center center',
103				'background-repeat': 'no-repeat',
104				'background-image': 'url(' + $video.attr('poster') + ')'
105			});
106			$video.css({
107				'min-width': 'auto',
108				'min-height': 'auto',
109				'width': '100%',
110				'height': 'auto',
111				'position': 'absolute',
112				'left': '50%',
113				'top': '50%',
114				'transform': 'translate(-50%,-50%)'
115			});
116			if( el_settings.fullScreen ) {
117				$container.css({
118					'position': 'fixed',
119					'top': '0',
120					'bottom': '0',
121					'left': '0',
122					'right': '0',
123					'height': 'auto',
124					'margin': '0',
125					'z-index': '-1'
126				});
127			}
128
129
130			// Fade in video by setting the transition duration
131			$video.css('transition-duration', el_settings.fadeIn + 'ms');
132
133
134			// Remove on iOS
135			if( iOS ) {
136				// Unset sources to prevent them from continuing to download
137				$video.attr('src', '');
138				$video.find('source').attr('src', '');
139				$video.remove();
140			}
141
142
143			// Mimic background-size: cover with video element
144			$.fn.bgVideo.fitVideo( $video );
145			$(window).resize(function(){
146				$.fn.bgVideo.fitVideo( $video );
147			});
148
149
150			// Pause after X seconds
151			el_settings.pauseAfter = parseInt( el_settings.pauseAfter, 10 );
152			if( el_settings.pauseAfter > 0 ) {
153				$video.on('timeupdate', function(){
154					var now = currentTime();
155					if( now > start_time + el_settings.pauseAfter ) {
156						video.pause();
157						if( el_settings.fadeOnEnd ) {
158							$video.removeClass('is-visible');
159						}
160					}
161				});
162			}
163
164
165			// Play / pause button
166			if( el_settings.showPausePlay ) {
167				// Append pauseplay element created earlier
168				$container.append($pauseplay);
169				// Position element
170				$pauseplay.css({
171					'left':   'auto',
172					'right':  'auto',
173					'top':    'auto',
174					'bottom': 'auto'
175				});
176				$pauseplay.css(el_settings.pausePlayXPos, el_settings.pausePlayXOffset);
177				$pauseplay.css(el_settings.pausePlayYPos, el_settings.pausePlayYOffset);
178				if( el_settings.pausePlayXPos === 'center' ) {
179					$pauseplay.css({
180						'left':        '50%',
181						'margin-left': '-10px'
182					});
183				}
184				if( el_settings.pausePlayYPos === 'center' ) {
185					$pauseplay.css({
186						'top':        '50%',
187						'margin-top': '-10px'
188					});
189				}
190				// Add functionality
191				$pauseplay.on('click', function(){
192					if(video.paused) {
193						video.play();
194					} else {
195						video.pause();
196					}
197				});
198			}
199
200
201		});
202
203
204	};
205
206
207	// Default settings
208	$.fn.bgVideo.defaults = {
209		fullScreen: false, // Sets the video to be fixed to the full window
210		fadeIn: 500, // Milliseconds to fade video in/out (0 for no fade)
211		pauseAfter: 120, // Seconds to play before pausing (0 for forever)
212		fadeOnPause: false, // For all (including manual) pauses
213		fadeOnEnd: true, // When we've reached the pauseAfter time
214		showPausePlay: true, // Show pause/play button
215		pausePlayXPos: 'right', // left|right|center
216		pausePlayYPos: 'top', // top|bottom|center
217		pausePlayXOffset: '15px', // pixels or percent from side - ignored if positioned center
218		pausePlayYOffset: '15px' // pixels or percent from top/bottom - ignored if positioned center
219	};
220
221
222	// Fit video
223	$.fn.bgVideo.fitVideo = function( $video ) {
224
225		var $container = $video.parent(),
226			container_height = $container.outerHeight(),
227			container_width = $container.outerWidth();
228
229		// Do this again every time the screen size changes
230		$video.css({
231			'height': 'auto',
232			'width': container_width + 'px'
233		});
234
235		var video_height = $video.height();
236
237		if( container_height > video_height ) {
238			//console.log('Container height > video height');
239			$video.css({
240				'height': container_height + 'px',
241				'width': 'auto'
242			});
243		}
244
245	};
246
247
248	// Auto run based on data attributes
249	$(document).ready(function(){
250		$('[data-bgvideo]').bgVideo();
251	});
252
253
254}(jQuery));