How to Create YouTube Video Responsive Lightbox

Are you looking for Lightbox solution for Youtube video? If so then you are on the right article. Here we will show you how to create and make it responsive, so it works on all kind of media devices.

We do create the lightbox video using the HTML, CSS and a bit of Jquery. It is light weight solution which is easy to implement.

But wait, You may be looking for some solution for HTML5 video, if you are then here is our recently tutorial about adding play button over the HTML5 Video and how to add Text Over Video.

Ok, let’s back to our today tutorial about opening a youtube video as lightbox using the jQuery. The first thing we have to take a look the HTML source code.

First of all, we have to define the container which holds some text information and a button which will perform the click function.

<div id="container"> <center> <p>Open the lightbox with below button</p> <button id="playme" onclick="revealVideo('video','youtube')">Play Video</button> </center> </div> 

Next, we have the source code for the lightbox or overlay. What we have done is to define the ID video and an on click function.

We also have two more inner containers for lightbox and content.

<div id="video" class="lightbox" onclick="hideVideo('video','youtube')"> <div class="lightbox-container"> <div class="lightbox-content"> <button onclick="hideVideo('video','youtube')" class="lightbox-close"> Close | ✕ </button> <div class="video-container"> <iframe id="youtube" width="960" height="540" src="https://www.youtube.com/embed/WsptdUFthWI?showinfo=0" frameborder="0" allowfullscreen></iframe> </div> </div> </div> </div> 

We need to place the close button which will allow closing the video instead of the content container. And, lastly, we have to put iframe youtube video code instead of the video container.

Let’s have a look the demo here.

See the Pen YouTube Responsive Lightbox by Darcy Voutt (@darcyvoutt) on CodePen.

If we take a look the CSS, we have found that the lightbox requires fixed position with z-index:1; You also notice that we have used the RGBA color scheme to keep the transparent background beside the video.

.lightbox { background-color: rgba(0, 0, 0, 0.8); overflow: scroll; position: fixed; display: none; z-index: 1; bottom: 0; right: 0; left: 0; top: 0; } 

Here are few more lines of CSS code where you can see the container of lightbox has the position relative instead of fixed.

.lightbox-container { position: relative; max-width: 960px; margin: 7% auto; display: block; padding: 0 3%; height: auto; z-index: 10; } 

To make the video responsive, we need to take the help of traditional media queries.

@media screen and (max-width: 768px) { .lightbox-container { margin-top: 10%; } } @media screen and (max-width: 414px) { .lightbox-container { margin-top: 13%; } } 

You can find the remaining CSS code in the above demo example. Now have a look the Javascript Code.

// Function to reveal lightbox and adding YouTube autoplay function revealVideo(div,video_id) { var video = document.getElementById(video_id).src; document.getElementById(video_id).src = video+'&autoplay=1'; // adding autoplay to the URL document.getElementById(div).style.display = 'block'; } // Hiding the lightbox and removing YouTube autoplay function hideVideo(div,video_id) { var video = document.getElementById(video_id).src; var cleaned = video.replace('&autoplay=1',''); // removing autoplay form url document.getElementById(video_id).src = cleaned; document.getElementById(div).style.display = 'none'; } 

The Javascript use the two functions. The first one is to reveal the lightbox and to add youtube autoplay.

The second function allows to hide the lightbox and removing the youtube autoplay.

That’s, and it’s easy, don’t you think? You just have to get the code and implement into your website to make it work. If you have an issue, you can try to add main jQuery file.