将自动播放添加到YouTubeiframe按钮单击jQuery不起作用

Question

我正在使用自定义按钮来保持我的设计一致。我添加了一个按钮，该按钮使用 CSS 中的z-index属性分层在iframe的顶部。单击时，iframe会做出反应，但不开始播放。我已经在其他网站上使用了这段代码，它工作正常。

此代码适用于 Safari，但不适用于 Chrome。我不确定我是否应该尝试重新安装 Chrome。

我还添加了我尝试过的其他 1 行(注释掉(。谁能建议为什么这不适用于铬？

$('#playLucid').click(function() {
$('#playLucid').css('display', 'none');
//$("#expose").attr('src','https://www.youtube.com/embed/7bU-x8pJbig?autoplay=1');
$("#expose")[0].src += "?autoplay=1";
});

Answer 1

这可能有效：

<iframe type="text/html" 
src="https://www.youtube.com/embed/..?autoplay=1" frameborder="0" 
allow="autoplay">
</iframe>

如果不起作用，请尝试添加mute=1或muted=1：

src="https://www.youtube.com/embed/..?autoplay=1&mute=1 

Answer 2

解决方案是在单击按钮后添加自动播放，这是一个示例：

$('#button-open-video').click(function(event) {
var video = $('#youtube').attr('src');
$('#youtube').attr('src', `${video}&autoplay=1`)  // adding autoplay to the URL
$('#video').css('display','block');
});

有关更多详细信息，请参阅此示例：单击此处

祝你好运