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.

$('.embed-video').embedVideo();

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

<h2>Youtube</h2>
<div class="embed-video" 
     data-source="youtube" 
     data-video-url="https://www.youtube.com/watch?v=Z-yY6RmF-iE">
</div>

<h2>Vimeo</h2>
<div class="embed-video" 
     data-source="vimeo" 
     data-video-url="https://vimeo.com/211970798">
</div>

4. More plugin settings with default values.

$('.embed-video').embedVideo({
  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:

2018-01-03

• CC Policy param added to Youtube

2017-11-23

• Kaltura server url option added

2017-10-29

• 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.