Play Youtube Videos In A Fullscreen Popup - Youtube Overlay

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.");
    }
});

Changelog:

2021-08-07

• JS Update

2021-05-20

• JS Update

2021-05-16

• Feature update

---

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