Performance-focused Youtube Video Embed - jQuery embedVideo

embedVideo is a simple-to-use jQuery plugin that helps you quickly embed Youtube videos into your webpages with lazy load support.

The plugin fetches/displays the preview images of Youtube videos on the page and loads/plays the iframe Youtube videos when clicked.

Fully responsive and mobile friendly. Ideal for video-heavy web apps to improve the page load speed.

See also:

• Lightweight jQuery Plugin To Lazy Load Youtube Videos - Lazy Loader
• jQuery Plugin To Lazy Load Youtube Videos Until Needed - LazyTube
• Lightweight jQuery Youtube Video Lazy Load Plugin - LazyYT.js

How to use it:

1. Load the script jquery.embedVideo.min.js after jQuery but before the closing body tag.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery.embedVideo.js"></script>

2. Load the Youtube Iframe API if needed.

<script src="https://www.youtube.com/iframe_api"></script>

3. Call the function on the video container and we're ready to go.

<script src="https://www.youtube.com/iframe_api"></script>

$(document).ready(function(){
  $('.embed-youtube').embedVideo();
});

4. Specify the video ID in the data-id attribute.

<div class="embed-youtube" data-id="ouv_isD5mZ8"></div>

5. Decide whether to enable the autoplay functionality.

<div class="embed-youtube" 
     data-id="ouv_isD5mZ8"
     data-autoplay="1">
</div>

6. Decide whether to show the video controls.

<div class="embed-youtube" 
     data-id="ouv_isD5mZ8"
     data-controls="0">
</div>

7. Customize the alternative cover image.

<div class="embed-youtube" 
     data-id="ouv_isD5mZ8"
     data-alternative-cover="bg.jpg">
</div>

8. Full plugin options with default values.

$('.embed-youtube').embedVideo({
  
  /**
   * default 120px * 90px
   * mqdefault 320px * 180px
   * hqdefault 480px * 360px
   * sddefault 640px * 480px
   * maxresdefault 1280px * 720px
   */
  sizePreview: '',

  /**
   * auto resizes the preview image
   */
  autoSizePreview: true,

  /**
   * alternative cover image
   */
  alternativeCover: false,

  /**
   *  custom play icon
   */
  imagePlayContainer: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 428.41 301.36" height="50"><path d="M639.64,440.2l115.76-60-115.76-60.4Z" transform="translate(-469.68 -233.97)" fill="#fff"/><path d="M893.81,299s-4.19-29.53-17-42.53c-16.27-17.07-34.56-17.16-42.9-18.16C773.9,234,684,234,684,234h-.17s-89.92,0-149.9,4.32c-8.35,1-26.64,1.09-42.91,18.16-12.84,13-17,42.53-17,42.53a647.81,647.81,0,0,0-4.28,69.33v32.51A648.06,648.06,0,0,0,474,470.15s4.19,29.53,17,42.53c16.31,17.07,37.71,16.53,47.23,18.33,34.26,3.27,145.67,4.32,145.67,4.32s90-.13,150-4.49c8.38-1,26.63-1.09,42.9-18.16,12.84-13,17-42.53,17-42.53a649,649,0,0,0,4.28-69.33V368.31A647.81,647.81,0,0,0,893.81,299ZM639.64,440.2V319.82l115.76,60.4Z" transform="translate(-469.68 -233.97)" fill="#e52d27"/></svg>',

  /**
   * opacity
   */
  imagePlayOpacity: .85,

  /**
   * callback function
   */
  callback: function() {},

  /**
   *  playlist, search, or user_uploads
   */
  listType: '',

  /**
   * determines the content to be loaded into the player.
   */
  list: '',

  /**
   * enables autoplay
   */
  autoplay: 0,

  /**
   * setting the parameter's value to 1 causes closed captions to be shown by default, even if the user has turned captions off. 
   */
  cc_load_policy: 0,

  /**
   * player color
   */
  color: 'red',

  /**
   * enables video controls
   */
  controls: 1,

  /**
   * disables keyboard interactions
   */
  disablekb: 0,

  /**
   * uses Youtube iFrame API
   */
  enablejsapi: 0,

  /**
   * end time
   */
  end: '',

  /**
   * shows fullscreen control
   */
  fs: 1,

  /**
   * specifies the language
   */
  hl: '',

  /**
   * setting the parameter's value to 1 causes video annotations to be shown by default, whereas setting to 3 causes video annotations to not be shown by default. The default value is 1.
   */
  iv_load_policy: 1,

  /**
   * enables infinite loop
   */
  loop: 0,

  /**
   * hides the logo
   */
  modestbranding: 0,

  /**
   *  provides an extra security measure for the IFrame API and is only supported for IFrame embeds
   */
  origin: '',

  /**
   * a list of video IDs
   */
  playlist: '',

  /**
   *  controls whether videos play inline or fullscreen
   */
  playsinline: 0,

  /**
   * indicates whether the player should show related videos when playback of the initial video ends
   */
  rel: 1,

  /**
   * start time
   */
  start: 0

});

---

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