Fullscreen Youtube Video Background Plugin with jQuery
File Size: | 221 KB |
---|---|
Views Total: | 21584 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Just another jQuery wrapper for Youtube API that allows to embed a YouTube video into your web page as a video background.
See also:
- Fullscreen Background Video Plugin For jQuery - BigVideo
- jQuery Plugin For Fullscreen YouTube Video Backgrounds - tubular
- Awesome Video Background Plugin with HTML5 and Youtube API - YTPlayer
- 10 Best Video Background Plugins
Basic Usage:
1. Include jQuery library and the jQuery Youtube Background plugin in your web page.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="src/jquery.youtubebackground.js"></script>
2. Include the required Youtube API in your web page.
<script src="http://www.youtube.com/iframe_api"></script>
3. Create an empty container to place an Youtube video.
<div id="background-video"></div>
4. Call the plugin and add an Youtube video ID in the Javascript.
$('#background-video').YTPlayer({ fitToBackground: true, // use as a background video videoId: 'YOUR VIDEO ID' });
5. Default options and settings. You can find more Youtube Javascript API options on this page.
$('#background-video').YTPlayer({ ratio: 16 / 9, // usually either 4/3 or 16/9 -- tweak as needed videoId: 'ZCAnLxRvNNc', // toy robot in space is a good default, no? mute: true, repeat: true, width: $(window).width(), wrapperZIndex: 99, playButtonClass: 'YTPlayer-play', pauseButtonClass: 'YTPlayer-pause', muteButtonClass: 'YTPlayer-mute', volumeUpClass: 'YTPlayer-volume-up', volumeDownClass: 'YTPlayer-volume-down', increaseVolumeBy: 10, start: 0, fitToBackground: true });
Changelog:
2018-09-18
- Fixing position issue if used as fit background
2018-09-18
- Removing one line of code that plays the video automatically instead of letting the YouTube API determine if the video should autoplay or not based on the playerVars value for autoplay that is passed in.
v1.0.5 (2016-05-17)
- upgrading version and adding 360° video support.
2015-12-22
- fix video's vertical centering when its height is greater then container's
2015-10-14
- adding Call back example, fixing fadeout, fixing cross origin error on example call
2015-09-18
- Fixed Youtube Player shield not functioning correctly with default CSS-
2015-05-28
- plugin now works on static sites without server
2015-01-23
- fixing deffered for times where YT is defined
2014-12-14
- fixed multiple video issue.
2014-10-15
- Update version
2014-10-08
- Update jquery.youtubebackground.js
2014-10-07
- adding destroy functions
2014-09-24
- adding fade in css
- moving to css model
This awesome jQuery plugin is developed by rochestb. For more Advanced Usages, please check the demo page or visit the official website.