Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

Fancybox YouTube Video Responsive Lightbox

Ashfaq Ahmed by Ashfaq Ahmed
December 24, 2019
in Modal & Popup
0
YouTube Video Responsive Lightbox
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

Today we have a tutorial about building a responsive lightbox for the YouTube video. I am sure, You have experience with making a lightbox for photos but how about adding a video?

Adding lightbox on any website is a good idea because it saves web page space and allows users to quickly access some important information. Whenever you will implement any functionality, Its important the code should be lightweight and provide a clean interface.

It is almost similar as we do with photos but need some more coding and also need to implement JavaScript.

The JavaScript will help us to control the video ID, auto play and  few more functionality. As you know the CSS and HTML is always require to make an web element.

I will use the media queries to make the light box mobile friendly and make sure, it work well on small device like mobile and tablet.

Furthermore , It is a lightweight solution which is easy to implement.

Basic HTML for Responsive Video Lightbox

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.

The CSS Styles

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%;
  }
}

The JavaScript

You can find the remaining CSS code in the above demo example. Now have a look at 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 responsive video 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.

Tags: CSS Lightbox
Demo Download
Previous Post

CSS Stylish Search Box Design in Plain HTML

Next Post

Responsive Pure CSS Modal/Lightbox without Javascript

Next Post
Pure CSS Lightbox

Responsive Pure CSS Modal/Lightbox without Javascript

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
3D Cube Image Rotator using CSS3 Animation

3D Cube Image Rotator using CSS3 Animation

August 21, 2020
Hexagonal CSS Grid

Auto Adjustable Hexagonal CSS Grid

December 17, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.