Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to add a 2nd YouTube video?

Currently it works with one video, if I want to add a 2nd video, how would I be able to do that?

How the code works is, it places an image and play button over the video where you have to click on it for it to play.

How would I be able to add a 2nd video?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

That is all I am trying to figure out how to do.

code https://jsfiddle.net/kvmde58t/

(function(){
  let YouTubeContainers = document.querySelectorAll(".embed-youtube");

  // Iterate over every YouTube container you may have
  for (let i = 0; i < YouTubeContainers.length; i++) {
    let container = YouTubeContainers[i];
    let imageSource = "https://img.youtube.com/vi/"+ container.dataset.videoId +"/sddefault.jpg"; 

    // Load the Thumbnail Image asynchronously
    let image = new Image();
    image.src = imageSource;
    image.addEventListener("load", function() {
      container.appendChild(image);
    });

    // When the user clicks on the container, load the embedded YouTube video
    container.addEventListener("click", function() {
      let iframe = document.createElement( "iframe" );

      iframe.setAttribute("frameborder", "0");
      iframe.setAttribute("allowfullscreen", "");
      iframe.setAttribute("allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture");
      // Important: add the autoplay GET parameter, otherwise the user would need to click over the YouTube video again to play it 
      iframe.setAttribute("src", "https://www.youtube.com/embed/"+ this.dataset.videoId +"?rel=0&showinfo=0&autoplay=1");

      // Clear Thumbnail and load the YouTube iframe
      this.innerHTML = "";
      this.appendChild( iframe );
    });
  }
})();
.embed-youtube {
  background-color: #000;
  margin-bottom: 30px;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  cursor: pointer;
}
.embed-youtube img {
  width: 100%;
  top: -16.84%;
  left: 0;
  opacity: 0.7;
}
.embed-youtube .embed-youtube-play {
  width: 68px;
  height: 48px;
  background-color: #333;
  box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
  z-index: 1;
  opacity: 0.8;
  border-radius: 6px;
}
.embed-youtube .embed-youtube-play:before {
  content: "";
  border-style: solid;
  border-width: 15px 0 15px 26.0px;
  border-color: transparent transparent transparent #fff;
}
.embed-youtube img,
.embed-youtube .embed-youtube-play {
  cursor: pointer;
}
.embed-youtube img,
.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
  position: absolute;
}
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
  top: 50%;
  left: 50%;
  transform: translate3d( -50%, -50%, 0 );
}
.embed-youtube iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.embed-youtube .embed-youtube-play:hover {
  background-color: #f00;
}
<!-- 1. Video Wrapper Container -->
<div class="embed-youtube" data-video-id="djV11Xbc914">
  <!-- 2. The preview button that will contain the Play icon -->
  <div class="embed-youtube-play"></div>
</div>

>Solution :

You just need to alter your HTML, adding new YouTube containers:

<!-- 1. Video Wrapper Container -->
<div class="embed-youtube" data-video-id="djV11Xbc914">
   <!-- 2. The preview button that will contain the Play icon -->
   <div class="embed-youtube-play"></div>
</div>

<!-- 1. Video Wrapper Container -->
<div class="embed-youtube" data-video-id="_3EuiU1qdpE">
  <!-- 2. The preview button that will contain the Play icon -->
  <div class="embed-youtube-play"></div>
</div>

<!-- 1. Video Wrapper Container -->
<div class="embed-youtube" data-video-id="aryDMAP6oug">
  <!-- 2. The preview button that will contain the Play icon -->
  <div class="embed-youtube-play"></div>
</div>

JS Fiddle: https://jsfiddle.net/fbhsm02L/1/

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading