CodePen Embed - AS demo - 3 containers v3

<div class="container1 outer active">
  <p class="test">Outer 1</p>
  <div class="curtain1">
    <div class="ratio-keeper">

      <div class="fence">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>

      <div class="fan fan1">
        <svg width="70%" height="70%" viewBox="76 130 381 381">
          <g id="fan">
            <path fill="#000" stroke="#000" d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
          </g>
        </svg>

      </div>
      <div class="cross"></div>
      <div class="video-cover video-one"></div>
      <div class="wrap embed-youtube ">
        <div class="video embed-youtube  " data-id="djV11Xbc914">
        </div>
        <button class="playa cover playgreen  embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
    <button data-destination=".container2" class="exit" type="button" aria-label="Open"></button>
  </div>
</div>

<div class="container2 outer">
  <p class="test">Outer 2</p>
  <div class="container ">

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

        <div class="fence">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>

        <div class="fan fan2">
          <svg width="70%" height="70%" viewBox="76 130 381 381">
            <use href="#fan" />
          </svg>
        </div>

        <div class="cross"></div>

        <div class="video-cover video-two"></div>

        <div class="wrap embed-youtube">
          <div class="video embed-youtube" data-id="djV11Xbc914">
          </div>
          <button class="playb cover embed-youtube-play" type="button" aria-label="Open"></button>
        </div>
      </div>
    </div>
    <div class="curtain">
      <div class="ratio-keeper">

        <div class="fence">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>

        <div class="fan fan3">
          <svg width="70%" height="70%" viewBox="76 130 381 381">
            <use href="#fan" />
          </svg>
        </div>

        <div class="cross"></div>

        <div class="video-cover video-three"></div>
        <div class="wrap embed-youtube">
          <div class="video embed-youtube" data-id="djV11Xbc914">
          </div>
          <button class="playc cover embed-youtube-play" type="button" aria-label="Open"></button>
        </div>
      </div>
    </div>
    <div class="curtain">
      <div class="ratio-keeper">

        <div class="fence">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>

        <div class="fan fan4">
          <svg width="70%" height="70%" viewBox="76 130 381 381">
            <use href="#fan" />
          </svg>
        </div>

        <div class="cross"></div>

        <div class="video-cover video-four"></div>

        <div class="wrap embed-youtube">
          <div class="video embed-youtube" data-id="djV11Xbc914">
          </div>
          <button class="playd cover embed-youtube-play" type="button" aria-label="Open"></button>
        </div>
      </div>
    </div>
    <div class="curtain">
      <div class="ratio-keeper">

        <div class="fence">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>

        <div class="fan fan5">
          <svg width="70%" height="70%" viewBox="76 130 381 381">
            <use href="#fan" />
          </svg>
        </div>

        <div class="cross"></div>

        <div class="video-cover video-five"></div>
        <div class="wrap embed-youtube">
          <div class="video embed-youtube" data-id="djV11Xbc914">
          </div>
          <button class="playe cover embed-youtube-play" type="button" aria-label="Open"></button>
        </div>
      </div>
    </div>
    <div class="curtain">
      <div class="ratio-keeper">

        <div class="fence">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>

        <div class="fan fan6">
          <svg width="70%" height="70%" viewBox="76 130 381 381">
            <use href="#fan" />
          </svg>
        </div>

        <div class="cross"></div>

        <div class="video-cover video-six"></div>
        <div class="wrap embed-youtube">
          <div class="video embed-youtube" data-id="djV11Xbc914">
          </div>
          <button class="playf cover embed-youtube-play" type="button" aria-label="Open"></button>
        </div>
      </div>
      <button data-destination=".container3" class="exit" type="button" aria-label="Open"></button>
      <button data-destination=".container1" class="exit back" type="button" aria-label="Open"></button>
    </div>
  </div>
</div>

<div class="container3 outer">
  <p class="test">Outer 3</p>
  <div class="container ">

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

        <div class="fence">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>

        <div class="fan fan2">
          <svg width="70%" height="70%" viewBox="76 130 381 381">
            <use href="#fan" />
          </svg>
        </div>

        <div class="cross"></div>

        <div class="video-cover video-seven"></div>

        <div class="wrap embed-youtube">
          <div class="video embed-youtube" data-id="djV11Xbc914">
          </div>
          <button class="playg cover embed-youtube-play" type="button" aria-label="Open"></button>
        </div>
      </div>
    </div>
    <div class="curtain">
      <div class="ratio-keeper">

        <div class="fence">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>

        <div class="fan fan3">
          <svg width="70%" height="70%" viewBox="76 130 381 381">
            <use href="#fan" />
          </svg>
        </div>

        <div class="cross"></div>

        <div class="video-cover video-eight"></div>
        <div class="wrap embed-youtube">
          <div class="video embed-youtube" data-id="djV11Xbc914">
          </div>
          <button class="playh cover embed-youtube-play" type="button" aria-label="Open"></button>
        </div>
      </div>
    </div>
    <div class="curtain">
      <div class="ratio-keeper">

        <div class="fence">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>

        <div class="fan fan4">
          <svg width="70%" height="70%" viewBox="76 130 381 381">
            <use href="#fan" />
          </svg>
        </div>

        <div class="cross"></div>

        <div class="video-cover video-nine"></div>

        <div class="wrap embed-youtube">
          <div class="video embed-youtube" data-id="djV11Xbc914">
          </div>
          <button class="playi cover embed-youtube-play" type="button" aria-label="Open"></button>
        </div>
      </div>
    </div>
    <div class="curtain">
      <div class="ratio-keeper">

        <div class="fence">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>

        <div class="fan fan5">
          <svg width="70%" height="70%" viewBox="76 130 381 381">
            <use href="#fan" />
          </svg>
        </div>

        <div class="cross"></div>

        <div class="video-cover video-ten"></div>
        <div class="wrap embed-youtube">
          <div class="video embed-youtube" data-id="djV11Xbc914">
          </div>
          <button class="playj cover embed-youtube-play" type="button" aria-label="Open"></button>
        </div>
      </div>
    </div>
    <div class="curtain">
      <div class="ratio-keeper">

        <div class="fence">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>

        <div class="fan fan6">
          <svg width="70%" height="70%" viewBox="76 130 381 381">
            <use href="#fan" />
          </svg>
        </div>

        <div class="cross"></div>

        <div class="video-cover video-eleven"></div>
        <div class="wrap embed-youtube">
          <div class="video embed-youtube" data-id="djV11Xbc914">
          </div>
          <button class="playk cover embed-youtube-play" type="button" aria-label="Open"></button>
        </div>
      </div>
      <button data-destination=".container1" class="exit" type="button" aria-label="Open"></button>
      <button data-destination=".container2" class="exit back" type="button" aria-label="Open"></button>
    </div>
  </div>
</div>

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #302b63;
}
body.default-bg {
  background: teal;
}
body.bg1 {
  pointer-events: none;
  animation: bg1 2s ease 0s forwards;
}
@keyframes bg1 {
  100% {
    opacity: 0;
  }
}
body.bg2 {
  opacity: 0;
  animation: bg2 4s ease 0s forwards;
}

@keyframes bg2 {
  99% {
    pointer-events: none;
  }
  100% {
    opacity: 1;
    background: teal;
    pointer-events: initial;
  }
}

.outer {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  min-width: 255px;
  display: flex;
  padding: 8px 8px;
}
.outer {
  display: none;
}
.outer.active {
  display: flex;
}

.curtain1 {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 12px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
}

.curtain1::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: radial-gradient(circle, transparent 0% 35%, #0a0a0a 35%);

  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}

.curtain1::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid #f91f6e;
  pointer-events: none;
}

.curtain1.slide::after {
  outline: 1px solid #0059dd;
  transition: outline 2s ease-in;
  transition-delay: 8s;
  /*  add this */
  /*background-image: none;*/
}
.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
}

.fence {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: linear-gradient(
      45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px
    ),
    linear-gradient(
      -45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px
    );
  background-size: 10px 10px;
  filter: drop-shadow(0 0 5px #000);
  clip-path: circle(25% at center);
}

.fence > div {
  position: absolute;
  /*top: 0;*/
  left: 0;
  right: 0;
  /*width: 100%;*/
  height: 0.55%;
  /*height: 2px;*/
  background: green;
}

.fence > div:nth-child(1) {
  top: 10%;
}

.fence > div:nth-child(2) {
  top: 20%;
}

.fence > div:nth-child(3) {
  top: 30%;
}

.fence > div:nth-child(4) {
  top: 40%;
}

.fence > div:nth-child(5) {
  top: 50%;
}

.fence > div:nth-child(6) {
  top: 60%;
}

.fence > div:nth-child(7) {
  top: 70%;
}

.fence > div:nth-child(8) {
  top: 80%;
}

.fence > div:nth-child(9) {
  top: 90%;
}

.fan svg,
.fan1 svg,
.fan2 svg,
.fan3 svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 70%;
  margin: auto;
}

@keyframes fan-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.slide .fan svg,
.slide .fan1 svg,
.slide .fan2 svg,
.slide .fan3 svg {
  animation: fan-spin linear;
  animation-duration: 15s;
  animation-iteration-count: 24;
}

.cross::before,
.cross::after {
  content: "";
  background: black;
}

.cross::before {
  /*horizontal*/
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  /*width: 100%;*/
  /*height: 10px;*/
  height: 2.8%;
  clip-path: circle(29% at center);
}

.cross::after {
  /*vertical*/
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  /*width: 10px;*/
  width: 1.5%;
  /*height: 100%;*/
  clip-path: circle(51% at center);
}

.video-cover {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  transition: all 8s ease-in 0s;
  transition-delay: 1s;
  background: url("https://via.placeholder.com/264x264");
  background-position: center;
  background-size: 41.25% 73.33%;
  background-repeat: no-repeat;
  z-index: 1;
  animation: fadeInImage 2s ease-in 2s forwards;
  opacity: 0;
}

@keyframes fadeInImage {
  to {
    opacity: 1;
  }
}

.curtain1.slide .video-cover {
  transform: translateY(calc(-100% - 1px));
}
.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;
}

@media screen and (max-width: 500px) {
  .curtain {
    margin-bottom: 10px;
  }
}

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

iframe {
  display: block;
  animation: iframe 10s ease forwards;
  animation-delay: 7.5s;
  opacity: 0;
}

@keyframes iframe {
  to {
    opacity: 1;
  }
}

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

.embed-youtube.active .embed-youtube-play {
  display: none;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  99.9% {
    border-color: red transparent red transparent;
    pointer-events: none;
  }

  100% {
    transform: rotate(360deg);
    border-color: blue;
  }
}

@keyframes triangle {
  0% {
    opacity: 0;
  }

  99.9% {
    opacity: 0;
  }

  100% {
    border-left-color: blue;
    opacity: 1;
  }
}

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47px;
  height: 47px;
  cursor: pointer;
  border-radius: 100%;
  background: transparent;
  border: 5px solid red;
  box-sizing: border-box;
  /* opacity: 0;
    pointer-events: none;*/
  clip-path: circle(50%);
  text-decoration: none;
}

.slide .exit {
  /* animation: fadeInExit 4s  forwards 10s;*/
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit::before,
.exit::after {
  content: "";
  background-color: red;
  width: 47px;
  height: 5px;
  position: absolute;
  top: 0px;
  left: -5px;
  right: 0;
  bottom: 0;
  margin: auto;
}

.exit::before {
  transform: rotate(45deg);
}
.exit::after {
  transform: rotate(-45deg);
}
.back {
  top: -48px;
  bottom: auto;
  border-color: cyan;
}
.back::before,
.back::after {
  background-color: cyan;
  transform: rotate(0deg);
}
.back::after {
  transform: rotate(90deg);
}
.embed-youtube .embed-youtube-play.playgreen {
  border-color: green;
  animation: fadeInPlay 2s ease-in 2s forwards;
  animation-delay: 4s;
  opacity: 0;
  cursor: default;
  pointer-events: none;
}

@keyframes fadeInPlay {
  0% {
    opacity: 0;
  }

  99.9% {
    opacity: 1;
    pointer-events: none;
  }

  100% {
    opacity: 1;
    cursor: pointer;
    pointer-events: initial;
  }
}

.embed-youtube-play.playgreen::before {
  border-left-color: green;
}

/* for testing only */
p.test {
  color: #fff;
  position: fixed;
  top: 1rem;
  left: 1rem;
}

const manageCover = (function makeManageCover() {
  function showCover(playButton) {
    const cover = playButton.parentElement;
    cover.classList.add("active");
  }

  function openCurtain(curtain) {
    curtain.classList.add("slide");
  }

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

  function addCoverHandler(coverSelector, handler) {
    const cover = document.querySelector(coverSelector);
    cover.addEventListener("click", handler);
  }

  function addClickToButtons(playButtons) {
    playButtons.forEach(function playButtonHandler(playButton) {
      playButton.addEventListener("click", coverClickHandler);
    });
  }

  function init(/*selectors*/) {
    //config.containers = document.querySelector(selectors.container);
    //const allContainers = document.querySelectorAll(".outer");
    //const playButtons = document.querySelector(selectors.playButton);
    const allPlaybuttons = document.querySelectorAll(".cover");
    //const allPlaybuttons = document.querySelectorAll(".embed-youtube-play");
    addClickToButtons(allPlaybuttons);
  }

  return {
    addCoverHandler,
    init
  };
})();

const manageUI = (function makeManageUI() {
  const body = document.body;

  const players = [];

  function findPlayers() {
    const allCovers = document.querySelectorAll(".cover");
    const allWrappers = document.querySelectorAll(".wrap");
    allCovers.forEach(function addToPlayers(cover, index) {
      players.push({
        cover: cover,
        wrapper: allWrappers[index]
      });
    });
  }

  // inline arrow function, direct return
  function getWrapper(cover) {
    const index = players.findIndex((player) => player.cover === cover);
    return players[index].wrapper;
  }

  function animationEndHandler(evt) {
    const animationName = evt.animationName;
    if (animationName === "bg1") {
      body.classList.remove("bg1");
      body.classList.add("bg2");

      document.querySelector(".add").classList.add("active");
      document.querySelector(".add").classList.remove("add");

      document.querySelector(".remove").classList.remove("active");
      document.querySelector(".remove").classList.remove("remove");
      window.scrollTo(0, 0);
    }
    if (animationName === "bg2") {
      body.classList.remove("bg2");
      body.classList.add("default-bg");
    }
  }

  function exitClickHandler() {
    var myOuter = this.closest(".outer");
    var myDestination = this.dataset.destination;
    body.classList.add("bg1");
    myOuter.classList.add("remove");
    document.querySelector(myDestination).classList.add("add");
  }

  function addClickToExit(exitButtons) {
    exitButtons.forEach(function addExitButtonHandler(exitButtons) {
      exitButtons.addEventListener("click", exitClickHandler);
    });
  }

  function addExitHandlers(callback) {
    const resetVideo = document.querySelectorAll(".exit");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", callback);
    });
  }

  function init() {
    findPlayers();
    const exitButtons = document.querySelectorAll(".exit");
    addClickToExit(exitButtons);
    body.addEventListener("animationend", animationEndHandler);
  }

  return {
    addExitHandlers,
    getWrapper,
    init
  };
})();

const videoPlayer = (function makeVideoPlayer() {
  let player;

  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/player_api";
  const firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function shufflePlaylist(player) {
    player.setShuffle(true);
    player.playVideoAt(0);
    //player.stopVideo();
  }

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100);
    //shufflePlaylist(player);
  }

  function onPlayerStateChange(event) {
    const player = event.target;
    return player;
  }

  function addPlayer(video, playerOptions) {
    playerOptions.videoId = playerOptions.videoId || video.dataset.id;
    playerOptions.events = playerOptions.events || {};
    playerOptions.events.onReady = onPlayerReady;
    playerOptions.events.onStateChange = onPlayerStateChange;

    const player = new YT.Player(video, playerOptions);
    return player;
  }

  return {
    addPlayer
  };
})();

const managePlayer = (function makeManagePlayer() {
  const playerVars = {
    autoplay: 1,
    controls: 1,
    disablekb: 1,
    // enablejsapi: 1,
    //loop: 1,
    //playlist: 1,
    fs: 0,
    iv_load_policy: 3
  };

  const defaults = {
    height: 360,
    host: "https://www.youtube-nocookie.com",
    playerVars,
    width: 640
  };

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

  function combinePlayerOptions(opts1 = {}, opts2 = {}) {
    const combined = Object.assign({}, opts1, opts2);
    Object.keys(opts1).forEach(function checkObjects(prop) {
      if (typeof opts1[prop] === "object") {
        combined[prop] = Object.assign({}, opts1[prop], opts2[prop]);
      }
    });
    return combined;
  }

  function createPlayer(videoWrapper, playerOptions = {}) {
    const video = videoWrapper.querySelector(".video");
    const options = combinePlayerOptions(defaults, playerOptions);
    return videoPlayer.addPlayer(video, options);
  }

  function playerAdder(wrapper, playerOptions) {
    return function addPlayerCallback() {
      initPlayer(wrapper, playerOptions);
    };
  }
  function removePlayer(wrapper) {
    wrapper.player.destroy();
    delete wrapper.player;
    console.log("removePlayer");
  }

  function removePlayerHandler(/*evt*/) {
    //const el = evt.target;
    //const container = el.closest(".container");
    const wrapper = document.querySelector(".wrap");
    if (wrapper.player) {
      return removePlayer(wrapper);
    }
  }

  function initPlayer(wrapper, playerOptions) {
    show(wrapper);
    const player = createPlayer(wrapper, playerOptions);
    wrapper.player = player;
  }

  return {
    adder: playerAdder,
    removePlayerHandler
  };
})();

const players = (function coverUIPlayerFacade() {
  function addPlayer(coverSelector, playerOptions) {
    const cover = document.querySelector(coverSelector);
    const wrapper = manageUI.getWrapper(cover);
    const callback = managePlayer.adder(wrapper, playerOptions);
    manageCover.addCoverHandler(coverSelector, callback);
  }

  function init() {
    manageCover.init({
      //container: ".container",
      playButton: ".cover"
    });

    manageUI.init({});
    manageUI.addExitHandlers(managePlayer.removePlayerHandler);
  }

  return {
    add: addPlayer,
    init
  };
})();

players.init();

function onYouTubeIframeAPIReady() {
  players.add(".playa", {
    playerVars: {
      loop: 1,
      playlist: "djV11Xbc914"
    }
  });
  players.add(".playb", {});
  players.add(".playc", {});
  players.add(".playd", {});
  players.add(".playe", {
    playerVars: {
      playlist: ["mnfmQe8Mv1g", "M7lc1UVf-VE", "-Xgi_way56U", "CHahce95B1g"]
    }
  });
  players.add(".playf", {});
  players.add(".playg", {});
  players.add(".playh", {});
  players.add(".playi", {});
  players.add(".playj", {
    playerVars: {
      playlist: ["mnfmQe8Mv1g", "M7lc1UVf-VE", "-Xgi_way56U", "CHahce95B1g"]
    }
  });
  players.add(".playk", {});
}

Run Pen

This Pen is owned by Paul O'Brien on CodePen.

See more by @paulobrien on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.