0

I would like to stop playing a youtube video when I click on a div. I don't know how to do this and I do not get it to work when using information online. This is what I have done!

I have linked the youtube iframe API:

<script src="https://www.youtube.com/iframe_api"></script>

Then I have an iframe in my html file:

<iframe id="vid" src="https://www.youtube.com/embed/P2lm356ycwY?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

Then in my script I have this code:

$("#popupvid").click(function(){
    $("#popupvid").css("display","none");
    $("#vid").css("display","none");

    //Code to make the youtube video stop here:

});

What do I need to write so that the video stops here! Thanks in advance!

robeng
  • 85
  • 2
  • 10

2 Answers2

1

Please try this jquery.

<script>
$(document).ready(function () {
$(function(){
    $('#popupvid').click(function(){      
        $('iframe').attr('src', $('iframe').attr('src'));
    });
});
});
</script>
Sruthi
  • 63
  • 7
0
$(document).ready(function () {
    $("iframe").mouseover(function() {
        $("iframe").each(function () {
            $(this)[0].contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');
        });
    });
});

this will stop all videos, change mouse over event to click and the first iframe to the id of your div