Jquery Based Plugin to Help Viewing and Playing Youtube Videos

play youtube video on image click, is a javascript/jquery plugin that can be easily integrated into your web application. The main purpose of this plugin is to provide a simple and effective user interface, in the form of an overlay, to assist in playing the embedded youtube videos, based on the click event. This click event can be associated with all clickable HTML elements and is not limited to images.

youtube iframe fullscreen on play, popup youtube video on page load, video popup on page load, youtube video full screen, how to open youtube video in popup window in html

Table of Contents

Download the required files

Before starting coding, download the required files. Click here to proceed to the download section. Jscript file youtube-overlay.js required. When it comes to style sheets, you can either download the SCSS file which is youtube-overlay.scss, or the raw CSS file which is youtube-overlay.css.

I think you know how to place the script tag and link tag pointing to the above file location for your web application. Once you have your files, let’s work with the code.

How to make use of it:

1. Load the newest jQuery library and Youtube Overlay plugin’s information in your undertaking.

<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 factor to toggle the Youtube video lightbox.

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

3. Initialize the plugin. The constructor requires a request object.

var videoBuild = new YoutubeOverlayModule({
    sourceUrl: 'https://youtu.be/sY1S34973zA',
    triggerElement: "#demo",
    progressCallback: function() {
      console.log("Callback Invoked.");

4. Activate the plugin and complete.

var videoBuild = new YoutubeOverlayModule({
    sourceUrl: 'https://youtu.be/sY1S34973zA',
    triggerElement: "#demo",
    progressCallback: function() {
      console.log("Callback Invoked.");

5. For a number of Youtube videos on a web page, I recommend utilizing the data-videourl attribute:

<img id="video1" 
     data-videourl="Youtube Video 1"

<img id="video2" 
     data-videourl="Youtube Video 2"

<img id="video3" 
     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.");

Play Youtube Videos In A Fullscreen Popup, play youtube video on image click Plugin/Github, fullscreen youtube video background css, youtube video popup jquery, onclick video popup in html

See Demo And Download

Official Website(sricharankrishnan): Click Here

This superior jQuery/javascript plugin is developed by sricharankrishnan. For extra Advanced Usages, please go to the official website.

Related Posts


Generating Beautiful Vector Graphs With jQuery | smartGraph

SmartGraph is a free and easy-to-use JavaScript library to create beautiful vector diagrams with many customizations. This plugin allows developers to create dynamic, responsive, draggable vector graphics…


Image Slider With 20 Cool Transitions Component | vue-flux

Vue flux is an image slider developed with Vuejs 2 that comes with 20+ nice transitions out of the box. Included transitions 2D transitions Fade: Fades from…


Simple background Image Parallax Scroll Plugin In jQuery

Background parallax effect is a simple jQuery background image without any library. Uses jQuery’s scroll() function to track the scroll event and applies the exact parallax scroll…


Modular Color Picker Plugin for Bootstrap | BS Colorpicker

Bootstrap Colorpicker is a standard color picker plugin for Bootstrap 4. Colorpicker Plugin for Bootstrap 5/4/3 frameworks that allow you to add a color picker to an…


GDPR Friendly iFrame Manager In Vanilla JS | iframemanager

IframeMananger is a lightweight JavaScript plug-in that helps you to comply with GDPR by completely removing iframes at first and setting a notice related to that service….


Diagonal Thumbnails Carousel Slider | Anime.js

Diagonal Slider is a cool mini carousel made with Anime.js JavaScript library. It takes a bunch of pictures and turns them into a circular user interface where…