Quick Tips: Using Videos as Backgrounds

[Fi8sVrs]

Download | Demo

So you’ve seen videos being used as backgrounds across the web and you’re thinking ‘how do I do that?’. The main issue usually being making the video cover the entire screen. Normally when you set a video it will resize in accordance with its aspect ratio, meaning it won’t cover the entire background. Well don’t worry, for I am here to guide you on your enthralling quest towards background video freedom. Read on, young warrior.

Getting off the ground

First off, set up a div with the video you want as the background, and then have a content div for putting all the content. Don’t forget to take a screenshot of the video and save it as a jpg called poster.jpg. This will serve as a background for users who do not have browsers that support the video tag.

<div id="container">
	<video autoplay loop muted>
		<source src="video.mp4" type="video/mp4">
		<source src="video.webm" type="video/webm">
	</video>
	<div class="content">

	</div>
</div>

Next up, set up a bit of CSS to set the content to be positioned absolutely on top of the video:

#container {

position: relative;

overflow: hidden;

}

#container .content {

position: absolute;

top: 0;

left: 0;

}

Great! Now all we gotta do is figure out how to make the video fit the entire screen. We have to use a bit of Javascript magic to make this work:

A little bit of Javascript

As discussed, the issue is that the video aspect ratio will make the video very difficult to cover the entire screen. How do we fix this? Well we need to make a comparison of the aspect ratio of the window against the aspect ratio of the video. Then we can multiply the width of the video by this calculation making the video always fill the screen, no matter what size the user’s screen is.

Don’t forget to include jQuery! Your code should look a bit like this:

$(function() {

// IE detect

function iedetect(v) {

var r = RegExp('msie' + (!isNaN(v) ? ('\\s' + v) : ''), 'i');

return r.test(navigator.userAgent);

}

// For mobile screens, just show an image called 'poster.jpg'. Mobile

// screens don't support autoplaying videos, or for IE.

if(screen.width < 800 || iedetect(8) || iedetect(7) || 'ontouchstart' in window) {

(adjSize = function() { // Create function called adjSize

$width = $(window).width(); // Width of the screen

$height = $(window).height(); // Height of the screen

// Resize image accordingly

$('#container').css({

'background-image' : 'url(poster.jpg)',

'background-size' : 'cover',

'width' : $width+'px',

'height' : $height+'px'

});

// Hide video

$('video').hide();

})(); // Run instantly

// Run on resize too

$(window).resize(adjSize);

}

else {

// Wait until the video meta data has loaded

$('#container video').on('loadedmetadata', function() {

var $width, $height, // Width and height of screen

$vidwidth = this.videoWidth, // Width of video (actual width)

$vidheight = this.videoHeight, // Height of video (actual height)

$aspectRatio = $vidwidth / $vidheight; // The ratio the video's height and width are in

(adjSize = function() { // Create function called adjSize

$width = $(window).width(); // Width of the screen

$height = $(window).height(); // Height of the screen

$boxRatio = $width / $height; // The ratio the screen is in

$adjRatio = $aspectRatio / $boxRatio; // The ratio of the video divided by the screen size

// Set the container to be the width and height of the screen

$('#container').css({'width' : $width+'px', 'height' : $height+'px'});

if($boxRatio < $aspectRatio) { // If the screen ratio is less than the aspect ratio..

// Set the width of the video to the screen size multiplied by $adjRatio

$vid = $('#container video').css({'width' : $width*$adjRatio+'px'});

} else {

// Else just set the video to the width of the screen/container

$vid = $('#container video').css({'width' : $width+'px'});

}

})(); // Run function immediately

// Run function also on window resize.

$(window).resize(adjSize);

});

}

});

Now the video will cover the entire screen size on user resize or anything! Things to note:

• Mobiles dont support autoplayed videos, so we can't do this on mobile. Instead we'll show an image as a background called poster.jpg.
  
• Same goes for IE8 and below! For those browsers the poster.jpg image will be used instead.
  

Full screen background videos are really exploding on the web design scene, so I'm sure you'll find a use for it at some point. The footage I'm using is from Vimeo's free HD Stock Footage, so go check that out. Have a great day!

Source: Quick Tips: Using Videos as Backgrounds | InsertHTML