Load And Play Youtube/Vimeo Videos When Needed - embedvideos

File Size: 7.04 KB
Views Total: 5484
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Load And Play Youtube/Vimeo Videos When Needed - embedvideos

embedvideos is a jQuery plugin that gets/displays thumbnails(posters) for Youtube/Vimeo/Kaltura videos and then fetches the heavy iFrame video players only when the thumbnails are clicked. Optimized for responsive mobile web projects.

How to use it:

1. Place the main JavaScript file 'embed.videos.js' after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="embed.videos.js"></script>

2. Initialize the plugin and the embedvideos is ready for use.


3. Add the video URL to the webpage and specify the data source in the 'data-source' attribute as shown below:

<div class="embed-video" 

<div class="embed-video" 

4. More plugin settings with default values.

  kalturaServerURL: 'http://cloudvideo.cdn.net.co',
  maxWidth : '1200px', // data-max-width
  html5 : false,
  autoplay: false, // data-autoplay
  thumbnail : false, // data-thumbnail
  width : '100%', // data-width
  height : '100%' // data-height
  play : '<svg enable-background="new 0 0 34 34" height="34px" id="Layer_1" version="1.1" viewBox="0 0 34 34" width="34px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M17.078,0.25c-9.389,0-17,7.611-17,17s7.611,17,17,17s17-7.611,17-17S26.467,0.25,17.078,0.25z M14,23.963  V10.537l9,6.713L14,23.963z" fill="#FFF"/></svg>',
  playWidth: '100px',
  playHeight: '100px',
  playOpacity: '0.7'

Change log:


  • CC Policy param added to Youtube


  • Kaltura server url option added


  • Typeoff added to detect AMP

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