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
}
});
}
}
lasjorg
January 21, 2024, 12:40am
2
Why do you want to remove it and do you understand what it is doing?
If all you need to do inside the if is player.destroy() then you might be able to just check player before calling destroy on it.
player && player.destroy();
On the other hand, just because player is truthy doesn’t mean it is the correct thing. You may have to check that using player.getIframe()
Docs: Accessing and modifying DOM nodes
I have a question, maybe you would be able to help here.
With the if statement in the code: https://jsfiddle.net/3par6zfe/
When I click on a 2nd video, any video.
"Script error." comes up in console log.
How would that be fixed?
I get writing the code this way also: https://jsfiddle.net/p4Lf169z/1/
Clicking on a second video.
function createResetHandler(player) {
const myModal = document.querySelector("#myModal");
const close = document.querySelector(".close");
function clickMenu() {
const videoInModal = myModal.querySelector(".video");
if (player && player.getIframe() && videoInModal && player.getIframe().id === videoInModal.id) {
player.destroy();
myModal.classList.remove("open");
console.log("hit");
}
}
close.addEventListener("click", clickMenu);
myModal.addEventListener("click", clickMenu);
}
It is because you are removing the video Iframe (player.destroy()) when you close the starting player in the modal.
You then loop the players array where it does exist and try to call players[i].pauseVideo() on a video that doesn’t exist in the DOM.
You can guard it using players[i].getIframe()
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.PLAYING) {
for (let i = 0; i < players.length; i++) {
if (players[i].getIframe() && players[i] !== event.target) players[i].pauseVideo();
}
}
}
1 Like
Here is one that is set up differently.
I have this here where all the videos are showing:
https://jsfiddle.net/vgjad360/2/
Which is what I want, what I am trying to do:
I most likely removed too much from the working code for the videos to be visible on the screen.
I think I am closer to getting it working.
<div class="container1 ">
<div class="curtain1">
<div class="ratio-keeper">
<div class="wrap embed-youtube">
<div class="video embed-youtube">
</div>
<div class="playa"></div>
</div>
</div>
<div class="exit"></div>
</div>
</div>
Here is the working code: https://jsfiddle.net/u2pn17we/
Videos are hidden:
And the remove player works on this one.
Which is what I am trying to have work in the other code.
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 = container.querySelector(".wrap");
if (wrapper.player) {
return removePlayer(wrapper);
}
}
What I am trying to do now is,
Get the working code to be where, the videos are all showing.
Where clicking on the X or around the background area removes the player.
I am not really sure how to figure this one out.
Adding code back in I was able to get this far with no errors:
no videos appearing though.
https://jsfiddle.net/ux8jm6eq/5/
Here is the code with videos appearing:
https://jsfiddle.net/ux8jm6eq/2/
Here is the full working code: has buttons: https://jsfiddle.net/u2pn17we/
Update: Here I have the videos appearing: https://jsfiddle.net/zsac0f2u/1/
Next, trying to get remove player working.
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 = container.querySelector(".wrap");
if (wrapper.player) {
return removePlayer(wrapper);
}
}
Trying to have the exit button remove player in this version of the code:
https://jsfiddle.net/xfj0ch42/
<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="container">
<div class="ratio-keeper wrap">
<div class="video " data-id="1Q1aDAnBsU8"></div>
</div> </div>
<div class="playa"></div>
</div>
</div>
const manageUI = (function makeManageUI() {
function exitClickHandler() {
}
function addClickToExit(exitButtons) {
exitButtons.forEach(function addExitButtonHandler(exitButtons) {
exitButtons.addEventListener("click", exitClickHandler);
});
}
function addExitHandlers(callback) {
const resetVideo = document.querySelectorAll(".close");
resetVideo.forEach(function resetVideoHandler(video) {
video.addEventListener("click", callback);
});
}
function init() {
const exitButtons = document.querySelectorAll(".close");
addClickToExit(exitButtons);
}
return {
addExitHandlers,
init
};
}());
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 init() {
manageCover.init({
container: ".container"
});
manageUI.init({});
manageUI.addExitHandlers(managePlayer.removePlayerHandler);
}
return {
add: addPlayer,
init
};
}());
This looks like yet another post on your video player clone project? We’ve asked you several times not to make a bunch of posts for the same project. I’ve unlisted the other topics for you.
Like before, I highly recommend you learn the fundamentals of JavaScript.
The other topics were all closed so I couldn’t pot inside them.
You had two other topics that weren’t closed.
Uncaught TypeError: players.forEach is not a function"
https://jsfiddle.net/2y840Lx6/
function onPlayerStateChange(event) {
const player = event.target;
if (player !== players[0]) {
if (event.data === YT.PlayerState.PLAYING) {
players.forEach(function pauseOtherVideos(player) {
if (player !== event.target) {
player.pauseVideo();
}
});
}
}
}
