Javascript 强制页面上所有嵌入的 YouTube 视频同时播放、静音和循环播放的按钮

我正在try 创建一个按钮，用户可以点击，将强制页面上所有嵌入的YouTube视频同时开始播放，被静音，并循环.

这是我试图在其上实现按钮的页面- www.missingnewyork.com/last-seen个

为了嵌入每个视频，我使用以下代码，它现在在每个url后包含？enablejsani=1-

    <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>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/UrJmZ57EHwg?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>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/kgcB41C9i94?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>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/qB5ityfsboU?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>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/RM0nrCooQic?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>               
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/wqobN25apx4?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>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/4niCIE9xca4?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>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/MGWwy_zt6KU?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>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/JheP24KKaYo?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>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/8LuzXamIyjE?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>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_jv9TQlrru8?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/0TBYVXG1css?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/KqQqxC7aGhw?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/VUzoFhqYbo8?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/ypQjjIoO1Mc?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>                  
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/lzY70qA2Tr4?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/x-UprcCZIX0?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>               
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/DH-TFgizhxw?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/bme8Aa_Z1X0?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>  
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/kw3SAx4Hsd8?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocardlast">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/86DRzKe69i8?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
        </div>
    </div>

我已try 使用本帖子答案中提供的以下功能-

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"}', '*');
    });
}   

这是我正在使用的按钮-

<button id="play-all" style="position: fixed; top: 20px; left: 20px;">PLAY ALL</button> 

这是我必须做的，让按钮与功能有关系-

var playAllButton = document.getElementById('play-all');

playAllButton.addEventListener('click', playAllVideos);

不幸的是，当我点击按钮时，没有任何react .我在想这最后一段代码可能有问题……有没有人看到我哪里错了？

为了澄清，我只想让视频自动播放/循环/静音，如果用户点击了Play All按钮.如果用户没有点击Play All按钮，我需要页面的行为与它当前的行为完全一样.

谢谢你的帮助!