Play Youtube Videos In A Fullscreen Popup - Youtube Overlay

Play Youtube Videos In A Fullscreen Popup - Youtube Overlay
File Size: 6.58 KB
Views Total: 671
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Youtube Overlay is a Javascript module that helps to build and play the required video player Iframes from Youtube. Requires jQuery library.

The plugin allows the visitor by clicking/tapping a trigger element (typically video thumbnail) to open and play a Youtube video in a fully responsive fullscreen popup just like a video lightbox.

How to use it:

1. Load the latest jQuery library and Youtube Overlay plugin's files in your project.

<link href="/path/to/youtube-overlay.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/youtube-overlay.js"></script>

2. Create a trigger element to toggle the Youtube video lightbox and 

<img id="demo" src="thumb.jpg" />

3. Initialize the plugin. The constructor requires a request object that would have:

  • sourceUrl: Youtube embed url
  • triggerElement: id value of the element upon which click event is registered
  • progressCallback: callback function that gets called for updates from this Constructor for loading, completion etc...
var videoBuild = new YoutubeOverlayModule({
    sourceUrl: 'https://www.youtube.com/embed/1Q8fG0TtVAY',
    triggerElement: "#demo",
    progressCallback: function() {
      console.log("Callback Invoked.");
    }
});

4. Activate the plugin and done.

var videoBuild = new YoutubeOverlayModule({
    sourceUrl: 'https://www.youtube.com/embed/1Q8fG0TtVAY',
    triggerElement: "#demo",
    progressCallback: function() {
      console.log("Callback Invoked.");
    }
});

5. For multiple Youtube videos on a page, I suggest using the data-videourl attribute:

<img id="video1" 
     src="1.jpg" 
     data-videourl="Youtube Video 1"
     />

<img id="video2" 
     src="2.jpg" 
     data-videourl="Youtube Video 2"
     />

<img id="video3" 
     src="3.jpg" 
     data-videourl="Youtube Video 3"
     />
var img = $("#video1");

var videoBuild = new YoutubeOverlayModule({
    sourceUrl: img.attr("data-videourl"),
    triggerElement: "#" + img.attr("id"),
    progressCallback: function() {
      console.log("Callback Invoked.");
    }
});

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