javascripthtmlcssfade

How to prevent sliding doors from fading


When I click on the play button the sliding doors start to fade, how do I prevent that from happening?

In the code example I provided you'll, after you click on a button, you'll start to see the the sliding doors fade.

How do I adjust it so that the sliding doors don't fade after clicking on the play button?

How would I prevent the sliding doors from disappearing?

https://jsitor.com/CwCyY4PRj

https://jsfiddle.net/rackoqtp/

enter image description here

(function initCover() {

 /* function show(el) {
     el.classList.remove("hide");
   };

  function hide(el) {
     el.classList.add("hide");
   }*/

  function openCurtain(cover) {
    //hide(cover);
    const curtain = document.querySelector(".curtain");
    cover.classList.add("slide");
    return curtain;
  }

 /* function showVideo(curtain) {
    const thewrap = curtain.parentElement.querySelector(".wrap");
    show(thewrap);
  }*/

  function coverClickHandler(evt) {
    const cover = evt.currentTarget.parentElement.parentElement.parentElement;
    const curtain = openCurtain(cover);
    //showVideo(curtain);
  }

  const covers = document.querySelectorAll(".embed-youtube-play");
  covers.forEach(function addHandler(cover) {
    cover.addEventListener("click", coverClickHandler);
  });

}());



(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&fs=0");

      // Clear Thumbnail and load the YouTube iframe
      container.innerHTML = "";
      container.appendChild(iframe);
    });
  }
})();
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: white;
}

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

.curtain {
  margin:auto auto 20px;
  max-width: 640px;
  border: 21px solid;
  border-radius: 12px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
}
.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #0a0a0a;
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}
.curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid #333;
  pointer-events: none;
}

.curtain.slide::after {
  outline: 1px solid #0059dd;
  transition: outline 2s ease-in;
}



.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all 8s ease;
  transition-delay: 0s;
  overflow: hidden;
  pointer-events: none;

}

.panel-left {
  left: 0;
}

.panel-right {
  right: 0;
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 200%;
  background:red
  /* filter: drop-shadow(0 0 5px #000);*/
}

.panel-right::before {
  left: -100%;
}

.curtain.slide .panel-left {
  transform: translateX(calc(-100% - 1px));
}

.curtain.slide .panel-right {
  transform: translateX(calc(100% + 1px));
}

.embed-youtube {
  background-color: #000;
  margin-bottom: 100px;
}

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

.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;
  animation: fadein 3s ease-in 0s forwards;
}

@keyframes fadein {
  0% {
    opacity: 0;
    visibility: hidden;
  }

  100% {
    opacity: 1;
    visibility: visible;
  }
}


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


.hide{
  display: none;
}
<div class="container">
    <div class="curtain">
        <div class="ratio-keeper">


    <div class="panel-left"></div>
    <div class="panel-right"></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>
    <div class="curtain">
        <div class="ratio-keeper">

    <div class="panel-left"></div>
    <div class="panel-right"></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>

    <div class="curtain">
        <div class="ratio-keeper">

    <div class="panel-left"></div>
    <div class="panel-right"></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>
</div>


Solution

  • It's a relatively simple fix. Just get rid of the animation that handles the fading, and adjust the z-index of the 2 red panels so that they're always on top of the video.

    .panel-left,
    .panel-right {
      position: absolute;
      height: 100%;
      width: 50%;
      top: 0%;
      transition: all 8s ease;
      transition-delay: 0s;
      overflow: hidden;
      pointer-events: none;
      z-index: 2;
    }
    
    .embed-youtube iframe {
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      /* animation: fadein 3s ease-in 0s forwards; */
    }
    

    (function initCover() {
    
     /* function show(el) {
         el.classList.remove("hide");
       };
    
      function hide(el) {
         el.classList.add("hide");
       }*/
    
      function openCurtain(cover) {
        //hide(cover);
        const curtain = document.querySelector(".curtain");
        cover.classList.add("slide");
        return curtain;
      }
    
     /* function showVideo(curtain) {
        const thewrap = curtain.parentElement.querySelector(".wrap");
        show(thewrap);
      }*/
    
      function coverClickHandler(evt) {
        const cover = evt.currentTarget.parentElement.parentElement.parentElement;
        const curtain = openCurtain(cover);
        //showVideo(curtain);
      }
    
      const covers = document.querySelectorAll(".embed-youtube-play");
      covers.forEach(function addHandler(cover) {
        cover.addEventListener("click", coverClickHandler);
      });
    
    }());
    
    
    
    (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&fs=0");
    
          // Clear Thumbnail and load the YouTube iframe
          container.innerHTML = "";
          container.appendChild(iframe);
        });
      }
    })();
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    body {
      background: white;
    }
    
    .container {
      position: absolute;
      left: 0;
      right: 0;
      min-height: 100%;
      padding: 8px 8px;
    }
    
    .curtain {
      margin:auto auto 20px;
      max-width: 640px;
      border: 21px solid;
      border-radius: 12px;
      border-color: #000 #101010 #000 #101010;
      position: relative;
    }
    .curtain::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: #0a0a0a;
      border: 1px solid;
      border-color: #000 #101010 #000 #101010;
    }
    .curtain::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      outline: 1px solid #333;
      pointer-events: none;
    }
    
    .curtain.slide::after {
      outline: 1px solid #0059dd;
      transition: outline 2s ease-in;
    }
    
    
    
    .ratio-keeper {
      position: relative;
      height: 0;
      padding-top: 56.25%;
      margin: auto;
      overflow: hidden;
    }
    
    .panel-left,
    .panel-right {
      position: absolute;
      height: 100%;
      width: 50%;
      top: 0%;
      transition: all 8s ease;
      transition-delay: 0s;
      overflow: hidden;
      pointer-events: none;
      z-index: 1;
    
    }
    
    .panel-left {
      left: 0;
    }
    
    .panel-right {
      right: 0;
    }
    
    .panel-left::before,
    .panel-right::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 200%;
      background:red
      /* filter: drop-shadow(0 0 5px #000);*/
    }
    
    .panel-right::before {
      left: -100%;
    }
    
    .curtain.slide .panel-left {
      transform: translateX(calc(-100% - 1px));
    }
    
    .curtain.slide .panel-right {
      transform: translateX(calc(100% + 1px));
    }
    
    .embed-youtube {
      background-color: #000;
      margin-bottom: 100px;
    }
    
    .embed-youtube img {
      width: 100%;
      top: -16.84%;
      left: 0;
      opacity: 1;
    }
    
    .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;
      /* animation: fadein 3s ease-in 0s forwards; */
    }
    
    @keyframes fadein {
      0% {
        opacity: 0;
        visibility: hidden;
      }
    
      100% {
        opacity: 1;
        visibility: visible;
      }
    }
    
    
    .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);
    }
    
    
    .hide{
      display: none;
    }
    <div class="container">
        <div class="curtain">
            <div class="ratio-keeper">
    
    
        <div class="panel-left"></div>
        <div class="panel-right"></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>
        <div class="curtain">
            <div class="ratio-keeper">
    
        <div class="panel-left"></div>
        <div class="panel-right"></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>
    
        <div class="curtain">
            <div class="ratio-keeper">
    
        <div class="panel-left"></div>
        <div class="panel-right"></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>
    </div>

    The video in the background does not show up for some reason in the code snippet. However, if you make these 2 changes in the fiddles you provided, you can see the behavior properly