How to prevent sliding doors from fading-CodePudding

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?

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


    <div ></div>
    <div ></div>

            <!-- 1. Video Wrapper Container -->

            <div  data-video-id="djV11Xbc914">

                <!-- 2. The preview button that will contain the Play icon -->
                <button  type="button" aria-label="Open"></button>
            </div>
        </div>
    </div>
    <div >
        <div >

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

    <div >
        <div >

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

CodePudding user response：

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


    <div ></div>
    <div ></div>

            <!-- 1. Video Wrapper Container -->

            <div  data-video-id="djV11Xbc914">

                <!-- 2. The preview button that will contain the Play icon -->
                <button  type="button" aria-label="Open"></button>
            </div>
        </div>
    </div>
    <div >
        <div >

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

    <div >
        <div >

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