javascript - 灯箱关闭后,featherlight 灯箱中的 Youtube iframe 视频继续播放

标签 javascript jquery html iframe youtube

我正在构建我的第一个网页,对于任何自定义 html、js、css 等,我都是新手。我正在 Squarespace 中的 Alex 模板上构建网站。我的目标是拥有一个可以从文本链接打开并播放 youtbe 视频的灯箱。目前,我可以获得文本链接来打开灯箱(featherlight)并播放 youtube 视频(iframe 嵌入),但随后我遇到了 2 个问题。 1.视频的音频播放两次 2. 当我关闭灯箱时,一组音频继续播放。

我完全迷失在这里,并试图寻找解决方案。这是我所拥有的:

<a id='open_lightbox' data-featherlight='.lightbox_content' href='#'>open lightbox</a>
<div style="display:none;">
<div class='lightbox_content'id=ytplayer>
    <iframe id="video1" width="1280" height="720" src="https://www.youtube.com/embed/g7fbe-oV-X0?rel=0&enablejsapi=1&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>
<script>
 $("#open_lightbox").click(function(){
  $("#video1")[0].src += "&autoplay=1";
  ev.preventDefault();
 });
</script>
</div>
</div>

其中很多内容来自不同的帖子,但我还没有找到任何有用的内容。这是我最后想出来的让视频播放的方法,但我不知道如何停止它,也不知道为什么有两个音频实例在运行。任何帮助表示赞赏。

最佳答案

试试这个:

$('.#open_lightbox').on('click', function(ev) {
    setTimeout(function() {
        $("#video1")[0].src += "&autoplay=1";
        },150);

    //ev.preventDefault();
});

你的做法曾经有效 - 我只需要再次使用这个技巧并面临同样的问题。添加一个小的延迟并删除 PreventDefault() 对我有用。

您可能需要为“#video1”放置一个更具体的 jQuery 选择器,这样它就不会自动播放两个视频。

关于javascript - 灯箱关闭后,featherlight 灯箱中的 Youtube iframe 视频继续播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43618137/

相关文章:

html - 使用 page-break-after 在 6 div 之后分页?

javascript - <输入>不会更新

php - 将 php 文件加载到弹出窗口中并将 php 变量发布到该弹出窗口(使用 onclick)

javascript - 从 pug 生成 HTML 字符串,其中还包含脚本

javascript - 在这种情况下如何更改下 3 个 sibling 的类(class)?

javascript - 如何将不同的数据目标分配给不同的选项值,以便显示不同的模型?

jQuery 多 div 下拉菜单

javascript - 禁用输入,直到选中复选框

javascript - 如何用 Protractor 计算不可见的项目

html - 如何将容器的原点更改为其内部元素