Performant Youtube Video Embed Plugin - jquery.youtubevideo.js

The jQuery YoutubeVideo.js plugin enables you to embed Youtube videos into the webpage in a simple and efficient way.

The plugin fetches & displays the thumbnail with a play button on the page and prevents the automatic load of the Youtube video player until you click the thumbnail.

More features:

• Also supports Youtube playlist.
• Custom player parameters.
• Custom thumbnail quality.
• Custom aspect ratio.
• Callback functions.

How to use it:

1. Download and insert the JavaScript file jquery.youtubevideo.js after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="js/jquery.youtubevideo.js"></script>

2. Create an element in which you want to place the Youtube video and specify the Youtube video ID in the data-ytb-video attribute as follows:

<div class="demo" data-ytb-video="PknU1QEV4Zo"></div>

<div class="demo" data-ytb-video="l98awDe5trg"></div>

<div class="demo" data-ytb-video="L7OkVdL_CbM"></div>

...

3. Initialize the Youtube video plugin and done.

$('.demo').youtubeVideo();

4. Customize the Youtube video by passing the following options object to the youtubeVideo() function.

$('.demo').youtubeVideo({

  // custom layout
  layout: {
    wrap: $('<div />', { class: 'ytb-video-wrap' }),
    container: $('<div />', { class: 'ytb-video-container' }),
    iframe: $('<iframe />', { class: 'ytb-video-iframe' }),
    button: $('<div />', { class: 'ytb-video-play-button'})
      .append('<svg viewBox="0 0 68 48"><path class="ytb-video-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#212121" fill-opacity="0.8"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg>'),
  },

  /*
    56.25 - 16:9
    75.25 - 4:3
    80.25 - 5:4
    100 - 1:1
  */
  aspectRatio: 56.25,

  /* 'default' - 120x90
    'mqdefault' - 320x180
    'hqdefault' - 480x360
    'sddefault' - 640x480
    'maxresdefault' - 1280x720
    'http://...' - custom image
  */
  cover: 'mqdefault',

  // custom parameters
  parametrs: 'autoplay=1&autohide=1',

  // play event
  playEvent: 'click',

  // or 'button'
  playMode: 'block',

  // or 'playlist'
  type: 'video',

  // Youtube API
  api: '',

  // displays the duration of the video
  // requires Youtube API
  duration: false,

  // displays the video title
  // requires Youtube API
  title: false,

  // displays the video description
  // requires Youtube API
  description: false
  
});

---

This awesome jQuery plugin is developed by WahaWaher. For more Advanced Usages, please check the demo page or visit the official website.