HTML5 Video Background Plugin With jQuery - covervid

Covervid is a jQuery plugin that simulates background-size:cover on <video> tag to create a fullscreen Html5 video background for your website.

See also:

• Awesome Video Background Plugin with HTML5 and Youtube API - YTPlayer
• jQuery Plugin For Fullscreen YouTube Video Backgrounds - tubular
• Fullscreen Background Video Plugin For jQuery - BigVideo

How to use it:

1. Wrap the Html5 video in a container using <video> tag.

<div class="covervid-wrapper">
<video class="covervid-video" autoplay loop>
<source src="videos/clouds.mp4" type="video/mp4">
<source src="videos/clouds.webm" type="video/webm">
</video>
</div>

2. The CSS rules to scale the container to be as large as possible so that the background area is completely covered by the background video.

.covervid-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

3. Include jQuery javascript library and the jQuery Covervid plugin at the end of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="covervid.js"></script> 

4. Call the plugin on the container element and set the default aspect ratio.

<script type="text/javascript">
$('.covervid-video').coverVid(1920, 1080);
</script>

Change logs:

2015-08-01

• call sizeVideo right away allowing coverVid function to be called after DOM has loaded
• fall back to new background cover image if browser/device does not support video + example style updates

2014-09-24

• Major structure update and new index

2014-08-22

• Spacing and compile fix

---

This awesome jQuery plugin is developed by stefanerickson. For more Advanced Usages, please check the demo page or visit the official website.