Pause YouTube video within iFrame

Question

I have a YouTube video playing in the background AFTER the close button is clicked...Here's the jQuery I can't get to work:

$('#close1').on('click', function() {
    //  $('#video1').stopVideo();
    $('#video1')[0]
        .contentWindow
        .postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');    

});

Here's a the example: http://georgehowell.biz/unsw1/index.html

score 0 · Answer 1 · edited May 23 '17 at 12:24

0

i found this interesting thread related this issue and it has many suggestions of solution, maybe any of them will work for you:

Stop embedded youtube iframe?

edited May 23 '17 at 12:24

Community

1
1

answered Nov 27 '16 at 22:26

Gutierrez

157
1
14

thanks for that link ..many variations to this problem. jax297 solution almost works in this instance - strangely, video starts again in a few seconds after close. I'm searching for a way to take the "?autoplay=1" OFF YouTube the URL when the "close" button is clicked – George Howell Nov 27 '16 at 22:39
It's good to see it helped you in some way, good luck with your work :) – Gutierrez Nov 28 '16 at 03:12

score 0 · Answer 2 · edited Mar 08 '18 at 12:43

0

Without using YouTube's iframe_API; you can simply use:

iframe.contentWindow.postMessage(message, origin);

to send message to iframeWindow (from parentWindow). Those messages can include "playVideo", "pauseVideo", "stopVideo", "muteVideo" etc.. (whatever video service, in this case youtube, supports)

Check out the link below for the live demo:

https://codepen.io/mcakir/pen/JpQpwm

edited Mar 08 '18 at 12:43

Railslide

5,344
2
27
34

answered Mar 08 '18 at 12:07

Must Ckr

310
2
5

score -1 · Answer 3 · answered Nov 28 '16 at 04:06

change 1 - the iframe src url should be blank here

<div id="openModal1" class="modalDialog">
    <div>
        <a href="" title="Close" class="close" id="close1">X</a>  
        <iframe width="600" height="338" src="" class="homeVideo" id="video1" allowfullscreen="true" allowscriptaccess="always"></iframe>       
    </div>  <!----END modal-body ---->
</div>  <!----END modal ---->

change 2: how to play the videos just set the src URL with autoplay=yup on the query string - we do not need to enable the JS api:

$('#thumb1').on('click', function(ev) {
 $("iframe#video1")[0].src = "https://www.youtube.com/embed/Lop0VCYdpGQ?rel=0&amp;wmode=transparent&autoplay=1";
});

change 3 - how to pause - just set the iframe src to an empty string:

    $('#close1').click(function(){
  $("iframe#video1")[0].src = "";
    });

but how do we start the video from where we paused? – Learner Jul 18 '17 at 06:55 — Learner, Jul 18 '17 at 06:55

Pause YouTube video within iFrame

3 Answers3