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