This time I will share jQuery Plugin and tutorial about jQuery Plugin For HTML5 Video Background With Fallback Image – vidbacking, hope it will help you in programming stack.
vidbacking is a responsive, cross-platform jQuery video background solution that allows an HTML5 video or Youtube Video to be used as a background for container or the whole webpage.
The plugin will display a fallback image (typically poster image) in case the current browser doesn’t support HTML5 videos.
How to use it:
1. Include the vidbacking plugin’s JavaScript and CSS files on the webpage where the jQuery library is properly loaded.
1 |
<link rel="stylesheet" href="jquery.vidbacking.css" type="text/css"> |
2 |
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> |
3 |
<script src="dist/jquery.vidbacking.js"></script> |
2. Embed an HTML5 video or Youtube Video into the webpage.
1 |
<video poster="poster.jpg" autoplay muted loop class="vidbacking"> |
2 |
<source src="sample.mp4" type="video/mp4"> |
3. Make the video fullscreen and act as the background for the whole page.
1 |
$('body').vidbacking(); |
4. You can also apply the video background to a container element you specify.
1 |
$('.container').vidbacking(); |
5. If you want to display a mask overlaying the background video.
1 |
$('.container').vidbacking({ |
6. Change the opacity of the mask & video.
1 |
$('.container').vidbacking({ |
Change log:
2018-05-07
- v2.0: supports Youtube videos.
2017-08-04
- pause video when out of viewport
This awesome jQuery plugin is developed by souravm84. For more Advanced Usages, please check the demo page or visit the official website.
