This time I will share jQuery Plugin and tutorial about Youtubebackground.js – A Wrapper For The Youtube API, hope it will help you in programming stack.
| File Size: | 220 KB |
|---|---|
| Views Total: | 2685 |
| 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.
1 |
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script> |
2 |
<script src="src/jquery.youtubebackground.js"></script> |
2. Create a container to place the Youtube video.
1 |
<div id="demo"> |
2 |
<img src="placeholder.jpg"> |
3 |
</div> |
3. Initialize the plugin to embed an Youtube video inside the container you just created.
1 |
$('#demo').YTPlayer({ |
2 |
videoId: 'VIDEO ID HERE' |
3 |
}); |
4. Make the Youtube video act as a background of your webpage.
01 |
#demo{ |
02 |
position: relative; |
03 |
background: transparent; |
04 |
} |
05 |
06 |
.ytplayer-container { |
07 |
position: absolute; |
08 |
top: 0; |
09 |
z-index: -1; |
10 |
} |
5. Full plugin options and callbacks.
01 |
$('#demo').YTPlayer({ |
02 |
03 |
// video ratio dimensions |
04 |
ratio: 16 / 9, |
05 |
06 |
// video ID |
07 |
videoId: 'LSmgKRx5pBo', |
08 |
09 |
// Mutes Youtube Video |
10 |
mute: true, |
11 |
12 |
// Loops Youtube Video |
13 |
repeat: true, |
14 |
15 |
// Expands Video to width of container |
16 |
width: $(window).width(), |
17 |
18 |
// CSS Classes |
19 |
playButtonClass: 'YTPlayer-play', |
20 |
pauseButtonClass: 'YTPlayer-pause', |
21 |
muteButtonClass: 'YTPlayer-mute', |
22 |
volumeUpClass: 'YTPlayer-volume-up', |
23 |
volumeDownClass: 'YTPlayer-volume-down', |
24 |
25 |
// Second in which video should begin playing at |
26 |
start: 0, |
27 |
28 |
// Pauses Video During <a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a> to help performance |
29 |
pauseOnScroll: false, |
30 |
31 |
// Fits to background vs fitting to the container specified with width |
32 |
fitToBackground: true, |
33 |
34 |
// Youtube player variables |
35 |
playerVars: { |
36 |
iv_load_policy: 3, |
37 |
modestbranding: 1, |
38 |
autoplay: 1, |
39 |
controls: 0, |
40 |
showinfo: 0, |
41 |
wmode: 'opaque', |
42 |
branding: 0, |
43 |
autohide: 0 |
44 |
}, |
45 |
46 |
// Callback |
47 |
callback: function() { |
48 |
console.log("playerFinshed"); |
49 |
} |
50 |
|
51 |
}); |
This awesome jQuery plugin is developed by aconnor731. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
