HTML5 Video Background Plugin With jQuery - covervid
File Size: | 17 MB |
---|---|
Views Total: | 3903 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.