HTML5 Video Background Plugin With jQuery - covervid

File Size: 17 MB
Views Total: 3836
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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">

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=""></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);

Change logs:


  • 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


  • Major structure update and new index


  • 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.