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

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

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.

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.

  • Publication date: 24.02.2019
  • Source