endurain
9/24/2019 - 2:59 PM

Youtube Responsive Lightbox

working codepen here for credit: https://codepen.io/darcyvoutt/pen/MaamWg

really easy and straight-forward YT lightbox. If you're having issues getting the video to load, check the Iframe source. Make sure it has 'embed' in the src.

Safari: if layering or overflow issues, check for any overflow:hidden styles on containers

youtuberesponsivelightbox
content_copyfile_download
/****HTML****/

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

<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>

/*********CSS*******/
.lightbox {
  background-color: #000000cf;
  overflow: scroll;
  position: fixed;
  display: none;
  z-index: 99;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}
.lightbox-container {
  position: relative;
  max-width: 960px;
  margin: 7% auto;
  display: block;
  padding: 0 3%;
  height: auto;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .lightbox-container {
    margin-top: 10%;
  }
}
@media screen and (max-width: 414px) {
  .lightbox-container {
    margin-top: 13%;
  }
}
.lightbox-content {
  box-shadow: 0 1px 6px fade(black, 70%);
}
.lightbox-close {
  text-transform: uppercase;
  background: transparent;
  position: absolute;
  font-weight: 300;
  font-size: 12px;
  display: block;
  border: none;
  color: white;
  top: -22px;
  right: 3%;
}
.video-container {
  padding-bottom: 56.25%;
  position: relative;
  padding-top: 30px;
  overflow: hidden;
  height: 0;
}
.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

/*********JS********/

// Function to reveal lightbox and adding YouTube autoplay
function revealVideo(div,video_id) {
  let 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) {
  let video = document.getElementById(video_id).src;
  let cleaned = video.replace('&autoplay=1',''); // removing autoplay form url
  document.getElementById(video_id).src = cleaned;
  document.getElementById(div).style.display = 'none';
}