HTML5 full-screen video isn't nearly groundbreaking, nor challenging, especially with the help of the CoverVid library from Stefan Erickson. What made my particular situation unique was the need to load completely different videos for each device resolution breakpoint and page template combination in WordPress. With this requirement in mind, I ran through some development options and disregarded a couple approaches mainly because of performance or configurability reasons.Ultimately, I decided to that Javascript would be the solution to dynamically load the correct video based on the page and device.Determine your breakpointsThe first piece of puzzle is pulling your media query breakpoints from your theme, so you can target each device resolution. It's up to you how granular you need your breakpoints rules to be. In the following example, I'm only using the window width to sniff out which video I should be loading, but you could easily use the window's height or user agent to target specific platforms like iOS and Android. var getDevice = function() {
if($(window).width() <= 480) {
return {
name: 'mobile-portrait',
videoHeight: 800,
videoWidth: 400
};
}
if($(window).width() <= 900) {
return {
name: 'tablet-portrait',
videoHeight: 1100,
videoWidth: 800
};
}
if($(window).width() <= 1100) {
return {
name: 'tablet-landscape',
videoHeight: 800,
videoWidth: 1100
};
}
return {
name: 'desktop',
videoHeight: 1150,
videoWidth: 1650
};
}In the snippet above, I'm also returning the native height and width of the video produced for each resolution. CoverVid requires those dimensions when configuring the full-screen layout.Now for the guts of itWhen the page loads, we need to figure out what video we need to load into the background. To do this, I chose to use target the page template CSS class WordPress automatically adds to the body tag. if($('body').hasClass('home')) {
switch(device.name) {
case "mobile-portrait":
videoSrc = {
'poster': '/wp-content/themes/your-themehttp://yorkstreetlabs.com/images/mobile-portrait-home-video-poster.jpg',
'ogv': '/wp-content/themes/your-theme/videos/400x800/home-video.oggtheora.ogv',
'webm': '/wp-content/themes/your-theme/videos/400x800/home-video.webmhd.webm',
'mp4': '/wp-content/themes/your-theme/videos/400x800/home-video.mp4'
};
break;
case "tablet-portrait":
// video paths
break;
case "tablet-landscape":
// video paths
break;
case "desktop":
// video paths
break;
}
}The code block above looks for a particular page (or pages) and then based on the type of the device, loads videos designed and compiled for that resolution. I also added a path to the "poster" video attribute, which provides the UI a placeholder image as the video downloads.Build the video HTML and inject it into the DOMThe following snippet builds the HTML5 video element with our dynamically targeted video paths. It appends to a hook in WordPress, which will be explained in the next section. $('.covervid-wrapper').append(
'<video id="background-video" class="covervid-video" autoplay loop poster="' + videoSrc.poster + '">' +
'<source src="' + videoSrc.webm + '" type="video/webm">' +
'<source src="' + videoSrc.ogv + '" type="video/ogv">' +
'<source src="' + videoSrc.mp4 + '" type="video/mp4">' +
'</video>'
);Finally, once the video is placed, we'll fire up CoverVid to handle the full-screen background layout. setTimeout(function() {
$('.covervid-video').coverVid(device.videoWidth, device.videoHeight);
}, 1);Finally, configure your WordPress themeAdd the necessary HTML element hook to your page template:<div class="covervid-wrapper"></div>And, last of all, give the CoverVid hook element its necessary styling in your theme's styles.css:.covervid-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}DownloadPull down a copy of this demo script wrapped up in a closure.
