YTPlayer- An Outstanding Video Background Plugin

YTPlayer
File Size:3228.59 KB
Views Total:390
Last Update:December 31, 2017
Publish Date:December 28, 2017
Official Website:Go to website
License:MIT

A jQuery plugin that helps and allows people to use it with a youtube video in the kind of background of the complete web page by using HTML5 and as it is with the data and the attributes and the youtube API is known as YTPlayer. This plugin can also be used as a normal video player for the entire web page.

How to use :

1. Include jQuery framework and jQuery YTPlayer :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="inc/jquery.mb.YTPlayer.js"></script>

2. Include jQuery YTPlayer CSS :

<link href="css/YTPlayer.css" media="all" rel="stylesheet" type="text/css">

3. Call the plugin :

<script>
jQuery(function(){
  jQuery(".player").mb_YTPlayer();
});
</script>

4. Initialize a YTPlayer as background :

<a class="player" data-property="{videoURL:'BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1}">My video</a>

5. All of the options can set by using data-* attributes :

// (string) the CSS selector of the DOM element where you want the video background; 
// if not specified it takes the “body”;
// if set to “self” the player will be instanced on that element.
containment: "body",

// ‘4/3’, ‘16/9’ or ‘auto’ (string) to set the aspect ratio of the movie; 
// if ‘auto’ the aspect ratio will be retreived form the getDataFromFeed method.
ratio: "16/9",

videoURL: null,

playlistURL: null,

// Set the seconds the video should start at.
startAt: 0,

// Set the seconds the video should stop at. If 0 is ignored.
stopAt: 0,

// true (boolean) or false play the video once ready.
autoPlay: true,

// set the volume level of the video.
vol: 100,

// Show or hide a raster image over the video.
addRaster  : false,

// Set the opacity of the player;
opacity: 1,

// or “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”
quality: "default", 

// mute the audio;
mute: false,

// true (boolean) or false loops the movie once ended.
loop: true,

// show or hide the player controls;
showControls: true,

showAnnotations: false,

// Show or hide the YT logo and the link to the original video URL.
showYTLogo : true,

stopMovieOnBlur: true,

// activate the new HTML5 full screen behavior.
realfullscreen : true,

// activate the Google Analytics event tracker for that player.
gaTrack: true,

optimizeDisplay : true,

onReady: function (player) {}

6. API Options :

// change the video of the specified player
$.fn.YTPChangeMovie(opt)

// play the video
$.fn.YTPPlay()

// pause the video
$.fn.YTPPause()

// stop the video
$.fn.YTPStop()

// switch video from background to front
$.fn.YTPFullscreen()

// change the video volume
$.fn.YTPSetVolume(val)

// mute the audio
$.fn.YTPMute()

// unmute the audio
$.fn.YTPUnmute()

// switch from mute to unmute
$.fn.YTPToggleVolume()

// retrive the original player returned by the YouTube API
$.fn.YTPGetPlayer()

// Returns the info data of the current video as JSON.
$.fn.YTPGetVideoData()

// Available only if you are playing a video list; 
// goes to the next video in the play list.
$.fn.YTPPlayNext()

// Available only if you are playing a video list; 
// goes to the previous video in the play list.
$.fn.YTPPlayPrev()

Done 🙂