I am in the process of developing a button that, when clicked by a user, will trigger all embedded YouTube videos on a specific webpage to start playing simultaneously, with sound muted, and set to loop.
The target page for this button implementation can be accessed here - www.missingnewyork.com/last-seen
For embedding each video, I am utilizing the following code, which now incorporates ?enablejsapi=1 after each URL -
<div id="horizontalcontainer">
<div id="scrolling-wrapper-video">
<div class="videocard1">
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/1i3x82LoQ1M?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</div>
(additional video card code snippets...)
</div>
</div>
I attempted to use the provided function from a previous post to achieve the desired functionality -
function playAllVideos() {
var videos = document.querySelectorAll('iframe[src^="https://www.youtube.com/embed/"]');
videos.forEach(function(video) {
video.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
video.contentWindow.postMessage('{"event":"command","func":"mute","args":""}', '*');
video.contentWindow.postMessage('{"event":"command","func":"setLoop","args":"1"}', '*');
});
}
Here is the button I have set up for this purpose -
<button id="play-all" style="position: fixed; top: 20px; left: 20px;">PLAY ALL</button>
And the script to link the button with the function -
var playAllButton = document.getElementById('play-all');
playAllButton.addEventListener('click', playAllVideos);
However, upon clicking the button, no action is observed. I suspect there might be an issue in the last portion of the code... Can anyone spot where I might have made a mistake?
Just to clarify, my intention is for the videos to auto-play, loop, and stay muted only when the user clicks on the PLAY ALL button. Otherwise, the page should function as it currently does.
Thank you for any assistance provided!