Load Youtube/Vimeo Videos On Demand To Improve Performance - Js-load-video

Load Youtube/Vimeo Videos On Demand To Improve Performance - Js-load-video
File Size: 37.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Yet another jQuery plugin that dynamically loads Youtube and Vimeo videos on demand to boost page performance. Licensed under the BSD-3-Clause.

The plugin defers the loading of Youtube and Vimeo video players until the user clicks on the thumbnails or placeholders on the webpage.

How to use it:

1. Import the latest version of jQuery library (slim build) and the jQuery Js-load-video plugin into the HTML document.

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

2. Create containers for the Youtube and Video videos using the following data attributes:

  • data-service: youtube or vimeo
  • data-placeholder: placeholder image
  • data-embed: video ID
<div class="video-container">
  <div class="js-load-video" data-service="youtube" data-placeholder="" data-embed="ScrYmMT47AU">
    <a href="#" class="btn" title="Play Video"></a>
  </div>
</div>

<div class="video-container">
  <div class="js-load-video" data-service="vimeo" data-placeholder="" data-embed="306834650">
    <a href="#" class="btn" title="Play Video"></a>
  </div>
</div>

3. Call the function on the video container and done.

$(function(){
  $('.js-load-video').joldLoadVideo();'
});

4. Customize the thumbnails size.

$(function(){
  $('.js-load-video').joldLoadVideo({

    // 'default' - 120x90
    // 'mqdefault' - 320x180
    // 'hqdefault' - 480x360
    // 'sddefault' - 640x480 
    // 'maxresdefault' - 1280x720
    youtubeThumbSize: 'maxresdefault',

    // thumbnail_small
    // thumbnail_medium
    // thumbnail_large
    vimeoThumbSize: 'thumbnail_large'
    
  });'
});

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