Installation:

# NPM
$ npm install jquery.mb.ytplayer

# Bower
$ bower install jquery.mb.ytplayer

1. Include the jQuery framework and jQuery YTPlayer on the web page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.mb.YTPlayer.min.js"></script>

2. Include jQuery YTPlayer CSS to type your player.

<link href="/path/to/dist/css/jquery.mb.YTPlayer.min.css" rel="stylesheet" />

3. Call the plugin and we’re ready to go.

jQuery(function(){
  jQuery(".player").YTPlayer();
});

4. Initialize a YTPlayer as a background. You’re capable of cross the choices utilizing the data-property attribute:

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

5. Initialize the plugin as an easy Youtube participant.

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

6. You may also play a listing of Youtube videos utilizing the YTPlaylist strategies.

// videos: an array of video objects
// shuffle: set to true you can have a random sequence of videos
// callback: callback function
var videos = [
    {videoURL:"VIDEO ID or VIDEO URL here",containment:'body',autoPlay:true, mute:false, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:true},
    {videoURL: "VIDEO ID or VIDEO URL here",containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:false},
    {videoURL: "VIDEO ID or VIDEO URL here",containment:'body',autoPlay:true, mute:false, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:true}
];
jQuery(".player").YTPlaylist(videos, false, function(video){
  jQuery("#videoID").html(video.videoData.id);
  jQuery("#videoTitle").html(video.videoData.title);
  jQuery("#videoDesc").html(video.videoData.description);
});

7. All attainable choices to customize the player. These choices may also be handed by way of attributes.

jQuery(".player").YTPlayer({
  /**
   videoURL (string)
   the complete Youtube video URL or the short url or the videoID
   */
  videoURL: null,

  /**
   containment (string)
   default containment for the player
   */
  containment: 'body',

  /**
   ratio (string or number)
   "auto", "16/9", "4/3" or number: 4/3, 16/9
   */
  ratio: 'auto',

  /**
   fadeOnStartTime (int)
   fade in timing at video start
   */
  fadeOnStartTime: 1000,

  /**
   startAt (int)
   start second
   */
  startAt: 0,

  /**
   stopAt (int)
   stop second
   */
  stopAt: 0,

  /**
   autoPlay (bool)
   on page load video should start or pause
   */
  autoPlay: true,

  /**
   coverImage (string)
   The path to the image to be used as cover if the autoPlay option is set to false
   */
  coverImage: false,

  /**
   loop (bool or int)
   video should loop or not; if number it will loop for the specified times
   */
  loop: true,

  /**
   addRaster (bool)
   shows a raster image over the video (added via CSS)
   You can change the raster image via CSS:
   .YTPOverlay.raster { background: url(images/raster.png)}
   */
  addRaster: false,

  /**
   mask (bool or object) the key is the second and the value is the path to the image
   Ex: mask:{ 0:'assets/mask-1.png', 5:'assets/mask-2.png', 30: false, 50:'assets/mask-3.png'}
   */
  mask: false,

  /**
   opacity (int)
   0 to 1
   */
  opacity: 1,

  /**
   quality (string)
   @deprecated

   setPlaybackQuality has been deprecated on the YT API and doesn't work anymore
   “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”, "default"
   */
  quality: 'default',

  /**
   vol (int)
   0 to 100
   */
  vol: 50,

  /**
   mute (bool)
   mute the video at start
   */
  mute: false,

  /**
   showControls (bool)
   shows the control bar at the bottom of the containment
   */
  showControls: true,

  /**
   anchor (string)
   center,top,bottom,left,right combined in pair
   */
  anchor: 'center,center',

  /**
   showAnnotations (bool)
   display the annotations on video
   */
  showAnnotations: false,

  /**
   cc_load_policy (bool)
   display the subtitles
   */
  cc_load_policy: false,

  /**
   showYTLogo (bool)
   display the Youtube logotype inside the button bar
   */
  showYTLogo: true,

  /**
   useOnMobile (bool)
   activate the player also on mobile
   */
  useOnMobile: true,

  /**
   playOnlyIfVisible (bool)
   play the video only if the containment is on screen
   */
  playOnlyIfVisible: false,

  /**
   onScreenPercentage (bool)
   percentage of the player height the video should stop or start when visible
   */
  onScreenPercentage: 30,

  /**
   * goFullScreenOnPlay (bool)
   * if the player containment is set to "self" this allow the video to go fullscreen when played
   */
  goFullScreenOnPlay: false,

  /**
   stopMovieOnBlur (bool)
   stop the video if the window loose the focus
   */
  stopMovieOnBlur: true,

  /**
   realfullscreen (bool)
   the video when in full screen covers all the display
   */
  realFullscreen: true,

  /**
   optimizeDisplay (bool)
   The video always fit the containment without displaying the black strips
   */
  optimizeDisplay: true,

  /**
   abundance (bool)
   the abudance of the video size
   */
  abundance: 0.3,

  /**
   gaTrack (bool)
   track the video plays on GA
   */
  gaTrack: true,

  /**
   remember_last_time (bool)
   when the page is reloaded the video will start from the last position
   */
  remember_last_time: false,

  /**
   addFilters (bool or string)
   add one or more CSS filters as object to the video
   Ex: {sepia: 50, hue_rotate : 220}
   */
  addFilters: false,

  /**
   onReady (function)
   a callback function fired once the player is ready
   */
  onReady: function (player) {
  },

  /**
   onReady (function)
   a callback function fired if there's an error
   */
  onError: function (player, err) {
  },

  /**
   onEnd (function)
   a callback function fired when the video ends
   */
  onEnd: function () {
  }
});

8. More API methods.

// change the video of the specified player
jQuery(".player").YTPChangeMovie(opt);

// play the video
jQuery(".player").YTPPlay();

// pause the video
jQuery(".player").YTPPause();

// stop the video
jQuery(".player").YTPStop();

// seek to 20s
jQuery('#[playerID]').YTPSeekTo(20);

// Manage video speed
jQuery(".player").YTPSetPlaybackRate()
jQuery(".player").YTPGetPlaybackRate()

// switch video from background to front
jQuery(".player").YTPFullscreen();

// change the video volume
jQuery(".player").YTPSetVolume(val);

// mute the audio
jQuery(".player").YTPMute();

// unmute the audio
jQuery(".player").YTPUnmute();

// switch from mute to unmute
jQuery(".player").YTPToggleVolume();

// retrive the original player returned by the YouTube API
jQuery(".player").YTPGetPlayer();

// return the info data of the current video as JSON.
jQuery(".player").YTPGetVideoData();

// available only if you are playing a video list; 
// goes to the next video in the play list.
jQuery(".player").YTPPlayNext();

// available only if you are playing a video list; 
// goes to the previous video in the play list.
jQuery(".player").YTPPlayPrev();

// available only if you are playing a video list; goes to a specific video in the play list based on the index.
jQuery(".player").YTPPlayIndex(idx);

// return the actual video time.
jQuery(".player").YTPGetTime();

// return the total video time.
jQuery(".player").YTPGetTotalTime();

// return the actual anchor point for the video.
jQuery(".player").YTPGetAnchor();

// define how the video will behave once the window is resized
// possible value are: ‘top,bottom,left,right,center’
// it accepts a pair of value comma separated (ex: ‘top,right’ or ‘bottom,left’)
jQuery(".player").YTPSetAnchor(posX,posY);

// apply a CSS filter to the player:
// grayscale : 1-100,
// hue_rotate: 1-360,
// invert : 1-100,
// opacity : 1-100,
// saturate : 1-400,
// sepia : 1-100,
// brightness: 1-400,
// contrast : 1-400,
// blur : 1-100
jQuery(".player").YTPApplyFilter('sepia', 50);

// apply multiple CSS filters to the player
jQuery(".player").YTPApplyFilters(filters);

// toggle the filter from the passed value to 0 and vice-versa
jQuery(".player").YTPtoggleFilter(filter, value);

// toggle all the filters
jQuery(".player").YTPToggleFilters(callback);

// remove a filter
jQuery(".player").YTPRemoveFilter(filter, callback);

// disable all filters
jQuery(".player").YTPDisableFilters();

// enable filters
jQuery(".player").YTPEnableFilters();

// add a mask to the target video player
jQuery(".player").YTPAddMask("path/to/mask.jpg");

// remove the mask
jQuery(".player").YTPRemoveMask();

// toggle the mask
jQuery(".player").YTPToggleMask();

// Change the cover image
jQuery(".player").changeCoverImage(img);

9. Event handlers.

// properties:
videoData.id
videoData.channelTitle
videoData.title
videoData.description
videoData.thumb_max
videoData.thumb_high
videoData.thumb_medium

jQuery(".player").on("YTPUnstarted",function(e){
  // do something here
});

jQuery(".player").on("YTPBuffering",function(e){
  // do something here
});

jQuery(".player").on("YTPReady",function(e){
  // do something here
});

jQuery(".player").on("YTPStart",function(e){
  // do something here
});

jQuery(".player").on("YTPPlay",function(e){
  // do something here
});

jQuery(".player").on("YTPPause",function(e){
  // do something here
});

jQuery(".player").on("YTPEnd",function(e){
  // do something here
});

jQuery(".player").on("YTPFullScreenStart",function(e){
  // do something here
});

jQuery(".player").on("YTPFullScreenEnd",function(e){
  // do something here
});

jQuery(".player").on("YTPMuted",function(e){
  // do something here
});

jQuery(".player").on("YTPUnmuted",function(e){
  // do something here
});

jQuery(".player").on("YTPTime",function(e){
  // do something here
});

jQuery(".player").on("YTPData",function(e){
  // do something here
});

Awesome Video Background Plugin, Youtube Player Plugin/Github, customize youtube video

See Demo And Download