Youtubebackground.js - A Wrapper For The Youtube API
File Size: | 220 KB |
---|---|
Views Total: | 3156 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

jQuery Youtubebackground.js is a wrapper for the Youtube API, great for fullscreen background videos or just regular videos. 360° Videos are supported as well.
How to use it:
1. Download and load the jQuery Youtubebackground.js plugin after the latest jQuery library.
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script> <script src="src/jquery.youtubebackground.js"></script>
2. Create a container to place the Youtube video.
<div id="demo"> <img src="placeholder.jpg"> </div>
3. Initialize the plugin to embed an Youtube video inside the container you just created.
$('#demo').YTPlayer({ videoId: 'VIDEO ID HERE' });
4. Make the Youtube video act as a background of your webpage.
#demo{ position: relative; background: transparent; } .ytplayer-container { position: absolute; top: 0; z-index: -1; }
5. Full plugin options and callbacks.
$('#demo').YTPlayer({ // video ratio dimensions ratio: 16 / 9, // video ID videoId: 'LSmgKRx5pBo', // Mutes Youtube Video mute: true, // Loops Youtube Video repeat: true, // Expands Video to width of container width: $(window).width(), // CSS Classes playButtonClass: 'YTPlayer-play', pauseButtonClass: 'YTPlayer-pause', muteButtonClass: 'YTPlayer-mute', volumeUpClass: 'YTPlayer-volume-up', volumeDownClass: 'YTPlayer-volume-down', // Second in which video should begin playing at start: 0, // Pauses Video During Scroll to help performance pauseOnScroll: false, // Fits to background vs fitting to the container specified with width fitToBackground: true, // Youtube player variables playerVars: { iv_load_policy: 3, modestbranding: 1, autoplay: 1, controls: 0, showinfo: 0, wmode: 'opaque', branding: 0, autohide: 0 }, // Callback callback: function() { console.log("playerFinshed"); } });
This awesome jQuery plugin is developed by aconnor731. For more Advanced Usages, please check the demo page or visit the official website.