How to get this code to work without the if statement – JavaScript


I can’t seen to figure out how to do it: https://jsfiddle.net/3par6zfe/

How would I be able to remove the if statement from this code and for it to be able to work?

if statement:

function createResetHandler(player) {
  const myModal = document.querySelector("#myModal");
  const close = document.querySelector(".close");
  const ytplayer0 = document.querySelector("#ytplayer0");

  function clickMenu() {
    if (player && player.getIframe() && ytplayer0 && player.getIframe().id === ytplayer0.id) {
      player.destroy();
      myModal.classList.remove("open");
      console.log("hit");
    }
  }

  close.addEventListener("click", clickMenu);
  myModal.addEventListener("click", clickMenu);
}

Code:

<div id="myModal" class="modal open">
  <div class="modal-content">
    <div class="blog-pager close">
      <a title="Exit" aria-label="Close"></a>
    </div>
    <div class="ratio-keeper">
      <div id="ytplayer0" data-id="1Q1aDAnBsU8"></div>
    </div>
  </div>
</div>
<!-- end modal -->

<div class="container">
  <div class="ratio-keeper">
    <div id="ytplayer1" data-id="1Q1aDAnBsU8"></div>
  </div>
</div>
<div class="container">
  <div class="ratio-keeper">
    <div id="ytplayer2" data-id="1Q1aDAnBsU8"></div>
  </div>
</div>
<div class="container">
  <div class="ratio-keeper">
    <div id="ytplayer3" data-id="1Q1aDAnBsU8"></div>
  </div>
</div>
<div class="container">
  <div class="ratio-keeper">
    <div id="ytplayer4" data-id="1Q1aDAnBsU8"></div>
  </div>
   </div>
  <div class="container">
  <div class="ratio-keeper">
    <div id="ytplayer5" data-id="1Q1aDAnBsU8"></div>
  </div>
</div>
/ modal code
(function (d) {
  const myModal = d.querySelector("#myModal");
  const close = d.querySelector(".close");
  close.addEventListener("click", clickMenu);
    myModal.addEventListener("click", clickMenu);
  function clickMenu() {
    myModal.classList.remove("open");
  }
})(document);
//end modal code


//code from fiddle below

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

let players = [];

function createResetHandler(player) {
  const myModal = document.querySelector("#myModal");
  const close = document.querySelector(".close");
  const ytplayer0 = document.querySelector("#ytplayer0");

  function clickMenu() {
    if (player && player.getIframe() && ytplayer0 && player.getIframe().id === ytplayer0.id) {
      player.destroy();
      myModal.classList.remove("open");
      console.log("hit");
    }
  }

  close.addEventListener("click", clickMenu);
  myModal.addEventListener("click", clickMenu);
}

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

function onPlayerStateChange(event) {
  if (event.data === YT.PlayerState.PLAYING) {
    for (let i = 0; i < players.length; i++) {
      if (players[i] !== event.target) players[i].pauseVideo();
    }
  }
}

function onYouTubeIframeAPIReady() {
  const divElements = document.querySelectorAll('.ratio-keeper div');
  for (let i = 0; i < divElements.length; i++) {
    players[i] = new YT.Player(divElements[i].id, {
      height: '361',
      host: 'https://www.youtube-nocookie.com',
      width: '642',
      videoId: divElements[i].getAttribute('data-id'),
      playerVars: {
        autoplay: 0,
        cc_load_policy: 0,
        controls: 1,
        disablekb: 1,
        fs: 0,
        iv_load_policy: 3,
      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }
}



Source link

Leave a Comment