Question

我正在使用自定义按钮来保持设计的一致性。我使用CSS中的iframe属性添加了一个位于z-index上方的按钮。单击iframe后会发生反应，但不会开始播放。我在其他网站上使用过此代码，效果很好。

此代码在Safari中有效，但在Chrome中不起作用。我不确定是否应该尝试重新安装Chrome。

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

$('#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');
});

有关详细信息，请参阅此示例：Click Here

祝你好运

在按钮上单击jQuery将自动播放添加到YouTube iframe上无法正常工作

2 个答案: