How to add a 2nd YouTube video?-CodePudding

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?

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

(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  data-video-id="djV11Xbc914">
  <!-- 2. The preview button that will contain the Play icon -->
  <div ></div>
</div>

CodePudding user response：

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

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

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

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

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