Correct video not playing when button 3 is clicked-CodePudding

The

To reproduce the issue:

Here is the code with 3 buttons I am right now working on:

I am shown video from #1

0: { playerVars: { playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g" } }, // Button 1

Instead this is the video that should be seen. data-id="-Xgi_way56U"

<div > <button data-container="play1"></button> <button data-container="play1"></button> <button data-container="play1" data-id="-Xgi_way56U"></button> </div>

That is the problem I am trying to fix in the code I am working on.

How would the code with 3 buttons that I am working on be adjusted so that, the correct video plays?

CodePudding user response：

The problem happens because in your source code, there are multiple divs with the class "video". The code uses a div with the class "video" to transfer the video id from the button to the actual video player.

Because there are multiple divs with the class video this doesn't work.

One workaround would be to just delete your first div block with class "play2" and everything contained in that div. However, you are probably going to want to be able to have multiple independent instances of the video player setup on the same page, so we need to fix the code so that the correct div with class "Video" is used.

For that change the implementation of the click event handler for the buttons.

From:

const myVideo = document.querySelector('.video'); document.querySelectorAll('button.cover').forEach(function(button) { button.addEventListener('click', function(event) { myVideo.dataset.id = event.currentTarget.dataset.id; }); });

To:

document.querySelectorAll('button.cover').forEach(function(button) { button.addEventListener('click', function(event) { let container=event.currentTarget.dataset.container; let myVideo = document.querySelector('.' container ' .video'); myVideo.dataset.id = event.currentTarget.dataset.id; }); });

We first get the "container" from the button that was clicked. Then we search for a div with class "video" that is inside another div with that container class.

Note that you don't need the global myvideo variable anymore.

Also change the code in onYouTubeIframeAPIReady to its original state:

//to add the player to all the play buttons let totalPlayButtons = document.querySelectorAll('[data-container="play1"]').length; //looping over all the play buttons and adding player to that for (let i = 0; i < totalPlayButtons; i ) { players.add(".playSingle" i, (playerVarsList[i] || {})); } players.add(".playInitial", {});

Also, there is a bug with your exit button logic, but that is outside the scope of this question. Please ask another question if you are having problems there.

CodePudding user response：

Locked for 4 days. Comments on this answer have been disabled, but it is still accepting other interactions. Learn more.

There are couple of places where array index is out of bound, that’s why it is not working.

Changes in onYouTubeIframeAPIReady() function:

function onYouTubeIframeAPIReady() { let playerVarsList = { 0: { playerVars: { playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g" } }, 1: { playerVars: { listType: "playlist", list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq" } } } //to add the player to all the play buttons let totalPlayButtons = document.querySelectorAll('[data-container="play1"]').length; //looping over all the play buttons and adding player to that for (let i = 0; i < totalPlayButtons; i ) { players.add(".playSingle" i, (playerVarsList[i%(Object.keys(playerVarsList).length)] || {})); } players.add(".playInitial", {}); }

Changes in findPlayers() function

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