Sun. Oct 1st, 2023

[ANSWERED] javascript – Only the play button should be clickable

By

Nov 18, 2022 css, html, javascript

Solution 1 :

You set the click event to the entire container. Set it to only the button (container.querySelector("button")), and change this to container to accomodate for the changes:

(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.querySelector("button").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/"+ container.dataset.videoId +"?rel=0&showinfo=0&autoplay=1");

      // Clear Thumbnail and load the YouTube iframe
      container.innerHTML = "";
      container.appendChild( iframe );
    });
  }
})();

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  display: flex;
  padding: 8px 8px;
}

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  min-width: 155px;
  position: relative;
}

.embed-youtube {
  background-color: #000;
  margin-bottom: 10px;
  position: relative;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  
}

.embed-youtube img {
  width: 100%;
  top: -16.84%;
  left: 0;
  opacity: 0.7; 
}

/*.embed-youtube img,
.embed-youtube .embed-youtube-play {
  cursor: default;
}*/

.embed-youtube img,
.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
  position: absolute;
}

.embed-youtube iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

 .embed-youtube .embed-youtube-play {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid blue;
  background: transparent;
  filter: drop-shadow(3px 3px 3px #000000b3);
 
   z-index: 1;

}

.embed-youtube-play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid blue;
  transform: translateX(4px);
}

.embed-youtube-play:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.embed-youtube-play:focus {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

<div class="container">
  <div class="curtain">

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

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


      <button class="embed-youtube-play" type="button" aria-label="Open"></button>
    </div>

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

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

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

  </div>
</div>

Solution 2 :

try:

 for(let button of embed-youtube-play) {
    button.addEventListener("click", function() {
      //yourCode
    })
}

Problem :

Currently, both the image and play button are both clickable.
How would I adjust it so that only the play button is clickable?

I am trying to figure out how to adjust it so that only the play button is clickable. How am I able to do that?
Is this able to be done?

code https://jsitor.com/3RCuY3s_O

(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 );
    });
  }
})();

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  display: flex;
  padding: 8px 8px;
}

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  min-width: 155px;
  position: relative;
}

.embed-youtube {
  background-color: #000;
  margin-bottom: 10px;
  position: relative;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  
}

.embed-youtube img {
  width: 100%;
  top: -16.84%;
  left: 0;
  opacity: 0.7; 
}

/*.embed-youtube img,
.embed-youtube .embed-youtube-play {
  cursor: default;
}*/

.embed-youtube img,
.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
  position: absolute;
}

.embed-youtube iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

 .embed-youtube .embed-youtube-play {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid blue;
  background: transparent;
  filter: drop-shadow(3px 3px 3px #000000b3);
 
   z-index: 1;

}

.embed-youtube-play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid blue;
  transform: translateX(4px);
}

.embed-youtube-play:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.embed-youtube-play:focus {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

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

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

  
     <button class="embed-youtube-play" type="button" aria-label="Open"></button>
</div>

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

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

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

</div>
</div>

Comments

Comment posted by jsitor.com/QYGnLCKjw

That isn’t working:

Comment posted by jsitor.com/tVIWLwkGtn

You forgot to change

Comment posted by devdoesit

I agree with this being the best solution. You have to assign the click event to the button and then within the function add the newly created iframe element to the container. That should work.

Comment posted by jsfiddle.net/d0rsbpg8

I don’t know how to add that into here:

Comment posted by nima

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer’s long-term value.

By

Related Post

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

Nov 20, 2022

[ANSWERED] python – Extract text from a class in HTML using CSS language

Nov 20, 2022

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022