我如何可以停止Youtube在弹出窗口运行视频，我有弹出窗口

How i can stop Youtube running Video in popup that i have popup?

本文关键字：窗口 视频 运行 何可 Youtube      更新时间：2023-09-26

当用户点击观看指定视频时，我创建了带有div标签的弹出窗口：

<div class="popup" >
                <h2 class="popup_header center">Tutorial - 2</h2>
                    <p class="popup_sub_header center"> Tutorial Label  </p>
                        <div class="popup_video_container">
                            <div class="video_frame pop_mode" id="popUpVideoWindow">
                                <iframe width="640" height="320"  src="https://www.youtube.com/embed/link" frameborder="0" allowfullscreen="" hspace="0" vspace="0"></iframe>
                            </div>
                            <div class="tutorial_description">
                            </div>
                        </div>
                    <a class="close" href="#close"></a>
            </div>

现在，当我关闭这个窗口时，视频不会停止，继续缓冲和播放其他东西。我已经研究了其他问题，并找到了afterClose、on('hidden')方法来处理class和id，如下所示：

$('.popUpVideoWindow').on('hidden',function(){
    $iframe = $(this)find("iframe");
    $iframe.attr("src", $iframe.attr("src"));
    console.log("Link set:" , $iframe.attr("src"));
});

和

$("#video_frame").bind('afterClose', function(){{
    $iframe = $(this)find("iframe");
    $iframe.attr("src", $iframe.attr("src"));
    console.log("Link set:" , $iframe.attr("src"));
});

但这对我没有帮助。当我关闭弹出分区时，我想停止播放视频。

    var figure = $(".video");
    var vid = figure.find("video");
    [].forEach.call(figure, function (item,index) {
        item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
        item.addEventListener('mouseout', hideVideo.bind(item,index), false);
    });
    function hoverVideo(index, e) {
        vid[index].play(); 
    }
    function hideVideo(index, e) {
        vid[index].pause(); 
    }

用这个JSFiddle 检查这个例子

进行必要的更改。请查收。。regds

相关文章：