Custom Youtube Player for a Video As Background on jQuery | YTPlayer

Youtube Player is an open-source jQuery component to easily create your own custom Youtube® player or to use a Youtube® video as the background of your page.

play youtube video in custom player, julbul custom youtube player, custom youtube player android github, custom youtube video player jquery, youtube video player online website

How to make use of it:


$ 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.


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

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

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){

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

   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)

   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

// play the video

// pause the video

// stop the video

// seek to 20s

// Manage video speed

// switch video from background to front

// change the video volume

// mute the audio

// unmute the audio

// switch from mute to unmute

// retrive the original player returned by the YouTube API

// return the info data of the current video as JSON.

// available only if you are playing a video list; 
// goes to the next video in the play list.

// available only if you are playing a video list; 
// goes to the previous video in the play list.

// available only if you are playing a video list; goes to a specific video in the play list based on the index.

// return the actual video time.

// return the total video time.

// return the actual anchor point for the video.

// 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’)

// 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

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

// toggle all the filters

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

// disable all filters

// enable filters

// add a mask to the target video player

// remove the mask

// toggle the mask

// Change the cover image

9. Event handlers.

// properties:

  // do something here

  // do something here

  // do something here

  // do something here

  // do something here

  // do something here

  // do something here

  // do something here

  // do something here

  // do something here

  // do something here

  // do something here

  // do something here

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

See Demo And Download

Official Website(pupunzi): Click Here

This superior jQuery/javascript plugin is developed by pupunzi. For extra Advanced Usages, please go to the official website.

Related Posts


[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…


Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…


A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…


Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…