Question

单击图像时，通过在视频和图像之间切换显示来加载视频。但是在页面加载后，即使点击display:none，视频也会在点击之前开始播放。

仅在<div>变成display:block之后，才能开始播放视频吗？

<div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'">
  <img src="http://www.like-agency.it/media/k2/items/cache/d6086de322f98f66cc694f32ea284557_XL.jpg" style="cursor:pointer" />
</div>
<div style="display:none">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/drwLL6I_xPo?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

Answer 1

如果您将样式从display: none更改为display: block，则可以在事件函数中包含一个简单的jQuery代码段。

$("iframe").attr('src', "https://www.youtube.com/embed/drwLL6I_xPo" + "? autoplay=1");

此外，您还必须从实际的iframe中删除“ autoplay = 1”。那么当div隐藏时，视频不应自动播放。仅当您更改src时（div进入display: block时），视频才会自动播放。

仅在设置display：block后播放YouTube视频

1 个答案: