Simplest Youtube Video Background Plugin For jQuery - rsBackVid
File Size: | 6.93 KB |
---|---|
Views Total: | 1405 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

rsBackVid is a simple yet customizable jQuery plugin which allows you to use an Youtube video as a fullscreen background for your webpage by using Youtube iframe API. The Youtube video background will auto play on page laod, with a fallback to an image or a fixed color on mobile devices.
How to use it:
1. Load the jQuery rsBackVid plugin after jQuery library but before you close the body tag.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="jquery.backVid.js"></script>
2. Call the plugin and specify the Youtube video ID to create a fullscreen video background for your web page.
$('body').backVid({ videoId: "9d8wWcJLnFI" });
3. Specify the fallback for mobile devices.
$('body').backVid({ videoId: "9d8wWcJLnFI", mobileBackgrounType: 'image', backgroundValue: 'poster.jpg' });
4. All customization options with default values.
$('body').backVid({ // either 4/3 or 16/9 ratio: 16/9, // Video ID videoId: '9d8wWcJLnFI', // mute sound mute: false, // repeatable repeat: true, // width width: $(window).width(), // CSS classes for controls playButtonClass: 'backVid-play', pauseButtonClass: 'backVid-pause', muteButtonClass: 'backVid-mute', unMuteButtonClass: 'backVid-unMute', volumeUpClass: 'backVid-volume-up', volumeDownClass: 'backVid-volume-down', // The amount to increment/decrement the volume by increaseVolumeBy: 10, // either image/colour mobileBackgrounType: 'colour', // either hex,RGB/Image URL backgroundValue: 'rgb(0,0,0)', // either false/lines/bricks/squares/waves/spots/dashes/crosses videoFilter: false, // The position to being the video at in seconds start: 0 });
This awesome jQuery plugin is developed by rorystandley. For more Advanced Usages, please check the demo page or visit the official website.