Как я могу остановить запуск YouTube видео в всплывающем окне, что у меня есть всплывающее окно?

Question

Я создал всплывающее окно с тегом 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"));

});

но это не поможет мне, чего я хочу. Я хочу прекратить воспроизведение видео, когда закрою этот всплывающий блок.

Answer 1

    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

Внесите необходимые изменения. проверьте это пожалуйста