MP4 Full Width Video Wrapper

index.html

<!-- Change POSTER, MP4_URL, WEBM_URL and OGG_URL -->
<!-- Might need to add some height to main element -->
<div class="video-hero jquery-background-video-wrapper demo-video-wrapper">
	<video class="jquery-background-video" autoplay muted loop poster="POSTER">
		<source src="MP4_URL" type="video/mp4">
		<source src="WEBM_URL" type="video/webm">
		<source src="OGG_URL" type="video/ogg">
	</video>
	<div class="video-hero--content"></div>
</div>

jquery.background-video.js

// The MIT License (MIT)

// Copyright (c) 2015 BG Stock - html5backgroundvideos.com

// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:

// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.

// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.

(function($) {

	// Add js class to html
	$('html').addClass('js');

	// Add IE8 shim for Date.now()
	if (!Date.now) {
		Date.now = function() { return new Date().getTime(); }
	}

	// Return current time in seconds
	function currentTime() {
		return Math.floor(Date.now() / 1000);
	}

	// The plugin
	$.fn.bgVideo = function( options ) {

		// @bool iOS
		function iOSversion() {
			if (/iP(hone|od|ad)/.test(navigator.platform)) {
				var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
				return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
			}
		}

		var iOSVersion = iOSversion();
		var old_iOS = false;

		if (iOSVersion && (iOSVersion[0] < 10)){
			old_iOS = true;
		}

		// Settings
		var settings = $.extend({}, $.fn.bgVideo.defaults, options );

		// Do the things
		return this.each(function() {

			// Set some handy variables
			var $video = $(this); // jQuery Object
			var video = $video[0]; // DOM node
			var poster = $video.attr('poster') || '';
			var $container = $video.parent();
			var $pauseplay = $('<button class="jquery-background-video-pauseplay pause"><span>Pause</span></button>');
			var start_time; // We'll set this when it starts playing


			// Check for any data attributes that will override the settings for this particular element
			var el_settings = $.extend({}, settings);
			var data_attrs = $video.data();
			$.each( data_attrs, function( data_name, data_val ) {
				if( data_name.indexOf('bgvideo') === 0 ) {
					// It's a match! Strip the bgvideo prefix and lowercase the first letter
					data_name = data_name.replace('bgvideo', '');
					data_name = data_name.charAt(0).toLowerCase() + data_name.slice(1);
					// Then set the setting
					el_settings[data_name] = data_val;
				}
			});


			// Attach to playing event
			$video.on('playing', function(){
				if(start_time == null){
					start_time = currentTime();
				}
				$video.addClass('is-playing is-visible');
				$pauseplay.removeClass('play').addClass('pause').find('span').text('Pause');
				$.fn.bgVideo.fitVideo( $video );
			});


			// If the video is already playing before js loads
			if( video.currentTime > 0 ) {
				$video.addClass('is-playing is-visible');
			}


			// Attach to pause event
			$video.on('pause', function(){
				$video.removeClass('is-playing');
				$pauseplay.removeClass('pause').addClass('play').find('span').text('Play');
				if(el_settings.fadeOnPause) {
					$video.removeClass('is-visible');
				}
			});


			// Set default styles
			$container.css({
				'position': 'relative',
				'overflow': 'hidden',
				'background-size': 'cover',
				'background-position': 'center center',
				'background-repeat': 'no-repeat',
				'background-image': 'url(' + poster + ')'
			});
			$video.css({
				'min-width': 'auto',
				'min-height': 'auto',
				'width': '100%',
				'height': 'auto',
				'position': 'absolute',
				'left': '50%',
				'top': '50%',
				'transform': 'translate(-50%,-50%)'
			});
			if( el_settings.fullScreen ) {
				$container.css({
					'position': 'fixed',
					'top': '0',
					'bottom': '0',
					'left': '0',
					'right': '0',
					'height': 'auto',
					'margin': '0',
					'z-index': '-1'
				});
			}


			// Fade in video by setting the transition duration
			$video.css('transition-duration', el_settings.fadeIn + 'ms');


			// Remove on iOS
			if( old_iOS ) {
				// Unset sources to prevent them from continuing to download
				$video.attr('src', '');
				$video.find('source').attr('src', '');
				$video.remove();
			}


			// Mimic background-size: cover with video element
			$.fn.bgVideo.fitVideo( $video );
			$(window).resize(function(){
				$.fn.bgVideo.fitVideo( $video );
			});


			// Pause after X seconds
			el_settings.pauseAfter = parseInt( el_settings.pauseAfter, 10 );
			if( el_settings.pauseAfter > 0 ) {
				$video.on('timeupdate', function(){
					var now = currentTime();
					if( now > start_time + el_settings.pauseAfter ) {
						video.pause();
						if( el_settings.fadeOnEnd ) {
							$video.removeClass('is-visible');
						}
					}
				});
			}


			// Play / pause button
			if( el_settings.showPausePlay && !old_iOS ) {
				// Append pauseplay element created earlier
				$container.append($pauseplay);
				// Position element
				$pauseplay.css({
					'left':   'auto',
					'right':  'auto',
					'top':    'auto',
					'bottom': 'auto'
				});
				$pauseplay.css(el_settings.pausePlayXPos, el_settings.pausePlayXOffset);
				$pauseplay.css(el_settings.pausePlayYPos, el_settings.pausePlayYOffset);
				if( el_settings.pausePlayXPos === 'center' ) {
					$pauseplay.css({
						'left':        '50%',
						'margin-left': '-10px'
					});
				}
				if( el_settings.pausePlayYPos === 'center' ) {
					$pauseplay.css({
						'top':        '50%',
						'margin-top': '-10px'
					});
				}
				// Add functionality
				$pauseplay.on('click', function(){
					if(video.paused) {
						video.play();
						start_time = currentTime();
					} else {
						video.pause();
					}
				});
			}


		});


	};


	// Default settings
	$.fn.bgVideo.defaults = {
		fullScreen: false, // Sets the video to be fixed to the full window
		fadeIn: 500, // Milliseconds to fade video in/out (0 for no fade)
		pauseAfter: 120, // Seconds to play before pausing (0 for forever)
		fadeOnPause: false, // For all (including manual) pauses
		fadeOnEnd: true, // When we've reached the pauseAfter time
		showPausePlay: true, // Show pause/play button
		pausePlayXPos: 'right', // left|right|center
		pausePlayYPos: 'top', // top|bottom|center
		pausePlayXOffset: '15px', // pixels or percent from side - ignored if positioned center
		pausePlayYOffset: '15px' // pixels or percent from top/bottom - ignored if positioned center
	};


	// Fit video
	$.fn.bgVideo.fitVideo = function( $video ) {

		var $container = $video.parent(),
			container_height = $container.outerHeight(),
			container_width = $container.outerWidth();

		// Do this again every time the screen size changes
		$video.css({
			'height': 'auto',
			'width': container_width + 'px'
		});

		var video_height = $video.height();

		if( container_height > video_height ) {
			//console.log('Container height > video height');
			$video.css({
				'height': container_height + 'px',
				'width': 'auto'
			});
		}

	};


	// Auto run based on data attributes
	$(document).ready(function(){
		$('[data-bgvideo]').bgVideo();
	});


}(jQuery));

style.css

/* CSS from jQuery Background Video plugin */
/**
 * Set default positioning as a fallback for if the plugin fails
 */
.jquery-background-video-wrapper {
	position: relative;
	overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.jquery-background-video {
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	-o-object-fit: contain;
	object-fit: contain;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/**
 * Fade in videos
 * Note the .js class - so non js users still
 * see the video
 */
.js .jquery-background-video {
	opacity: 0;
	transition: opacity 300ms linear;
}

.js .jquery-background-video.is-visible {
	opacity: 1;
}

/**
 * Pause/play button
 */
.jquery-background-video-pauseplay {
	position: absolute;
	background: transparent;
	border: none;
	box-shadow: none;
	width: 20px;
	height: 20px;
	top: 15px;
	right: 15px;
	padding: 0;
	cursor: pointer;
	outline: none !important;
}

.jquery-background-video-pauseplay span {
	display: none;
}

.jquery-background-video-pauseplay:after,
.jquery-background-video-pauseplay:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	transition: all .3s ease;
}

.jquery-background-video-pauseplay.play:before {
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #FFF; /* Change color for play button */
}

.jquery-background-video-pauseplay.pause:before,
.jquery-background-video-pauseplay.pause:after {
	border-top: 10px solid #FFF; /* Change color for pause button */
	border-bottom: 10px solid #FFF; /* Change color for pause button */
	border-left: 5px solid #FFF; /* Change color for pause button */
}

.jquery-background-video-pauseplay.pause:after {
  left: 10px;
}