This time I will share jQuery Plugin and tutorial about Fullscreen Youtube Video Background Plugin with jQuery, hope it will help you in programming stack.
Just another jQuery wrapper for Youtube API that allows to embed a YouTube video into your web page as a video background.
Basic Usage:
1. Include jQuery library and the jQuery Youtube Background plugin in your web page.
1 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
2 |
< script src = "src/jquery.youtubebackground.js" ></ script > |
2. Include the required Youtube API in your web page.
3. Create an empty container to place an Youtube video.
1 |
< div id = "background-video" ></ div > |
4. Call the plugin and add an Youtube video ID in the Javascript.
1 |
$( '#background-video' ).YTPlayer({ |
3 |
videoId: 'YOUR VIDEO ID' |
5. Default options and settings. You can find more Youtube Javascript API options on this page.
01 |
$( '#background-video' ).YTPlayer({ |
03 |
videoId: 'ZCAnLxRvNNc' , |
06 |
width: $(window).width(), |
08 |
playButtonClass: 'YTPlayer-play' , |
09 |
pauseButtonClass: 'YTPlayer-pause' , |
10 |
muteButtonClass: 'YTPlayer-mute' , |
11 |
volumeUpClass: 'YTPlayer-volume-up' , |
12 |
volumeDownClass: 'YTPlayer-volume-down' , |
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
2014-10-08
- Update jquery.youtubebackground.js
2014-10-07
2014-09-24
- adding fade in css
- moving to css model