How to pause a YouTube player when hiding the iframe

Question

I have a hidden div containing a YouTube video in an  lt iframe gt   When the user clicks on a link  this div becomes visible  the user should then be able to play the video   When the user closes the panel  the video should stop playback  How can I achieve this   Code    lt  -- link to open popupVid -- gt   lt p gt  lt a href  javascript    onClick  document getElementById  popupVid   style display      gt Click here lt  a gt  to see my presenting showreel  to give you an idea of my style - usually described as authoritative  affable and and engaging  lt  p gt    lt  -- popup and contents -- gt   lt div id  popupVid  style  position absolute left 0px top 87px width 500px background-color  D05F27 height auto display none z-index 200   gt      lt iframe width  500  height  315  src  http   www youtube com embed T39hYJAwR40  frameborder  0  allowfullscreen gt  lt  iframe gt      lt br   gt  lt br   gt      lt a href  javascript    onClick  document getElementById  popupVid   style display  none    gt    close    lt  a gt   lt  div gt  lt  --end of popupVid -- gt

User · Answer

Rob W answer helped me figure out how to pause a video over iframe when a slider is hidden. Yet, I needed some modifications before I could get it to work. Here is snippet of my html:

<div class="flexslider" style="height: 330px;">
  <ul class="slides">
    <li class="post-64"><img src="http://localhost/.../Banner_image.jpg"></li>
    <li class="post-65><img  src="http://localhost/..../banner_image_2.jpg "></li>
    <li class="post-67 ">
        <div class="fluid-width-video-wrapper ">
            <iframe frameborder="0 " allowfullscreen=" " src="//www.youtube.com/embed/video-ID?enablejsapi=1 " id="fitvid831673 "></iframe>
        </div>
    </li>
  </ul>
</div>

Observe that this works on localhosts and also as Rob W mentioned "enablejsapi=1" was added to the end of the video URL.

Following is my JS file:

jQuery(document).ready(function($){
    jQuery(".flexslider").click(function (e) {
        setTimeout(checkiframe, 1000); //Checking the DOM if iframe is hidden. Timer is used to wait for 1 second before checking the DOM if its updated

    });
});

function checkiframe(){
    var iframe_flag =jQuery("iframe").is(":visible"); //Flagging if iFrame is Visible
    console.log(iframe_flag);
    var tooglePlay=0;
    if (iframe_flag) {                                //If Visible then AutoPlaying the Video
        tooglePlay=1;
        setTimeout(toogleVideo, 1000);                //Also using timeout here
    }
    if (!iframe_flag) {     
        tooglePlay =0;
        setTimeout(toogleVideo('hide'), 1000);  
    }   
}

function toogleVideo(state) {
    var div = document.getElementsByTagName("iframe")[0].contentWindow;
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    div.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
};

Also, as a simpler example, check this out on JSFiddle

User · Answer

This is working fine to me with YT player   createPlayer    void     return new window  YT   Player this youtube playerId      height  this youtube playerHeight    width  this youtube playerWidth    playerVars        rel  0      showinfo  0             this youtube player pauseVideo

User · Answer

Hey an easy way is to simply set the src of the video to nothing  so that the video will desapear while it s hidden an then set the src back to the video you want when you click on the link that opens the video   to do that simply set an id to the youtube  iframe and call the src function using that id like this    lt script type  text javascript  gt  function deleteVideo     document getElementById  VideoPlayer   src        function LoadVideo     document getElementById  VideoPlayer   src  http   www youtube com embed WHAT EVER YOUTUBE VIDEO YOU WHANT      lt  script gt    lt body gt    lt p onclick  LoadVideo    gt LOAD VIDEO lt  P gt   lt p onclick  deleteVideo    gt CLOSE lt  P gt    lt iframe id  VideoPlayer  width  853  height  480  src  http   www youtube com WHAT EVER YOUTUBE VIDEO YOU HAVE  frameborder  0  allowfullscreen gt  lt  iframe gt    lt  boby gt

User · Answer

The easiest way to implement this behaviour is by calling the pauseVideo and playVideo methods  when necessary  Inspired by the result of my previous answer  I have written a pluginless function to achieve the desired behaviour   The only adjustments    I have added a function  toggleVideo I have added  enablejsapi 1 to YouTube s URL  to enable the feature   Demo  http   jsfiddle net ZcMkt  Code    lt script gt  function toggleVideo state           if state     hide   hide  Else  show video     var div   document getElementById  popupVid        var iframe   div getElementsByTagName  iframe   0  contentWindow      div style display   state     hide     none            func   state     hide     pauseVideo     playVideo       iframe postMessage    event   command   func       func       args                 lt  script gt    lt p gt  lt a href  javascript    onClick  toggleVideo     gt Click here lt  a gt  to see my presenting showreel  to give you an idea of my style - usually described as authoritative  affable and and engaging  lt  p gt    lt  -- popup and contents -- gt   lt div id  popupVid  style  position absolute left 0px top 87px width 500px background-color  D05F27 height auto display none z-index 200   gt      lt iframe width  500  height  315  src  http   www youtube com embed T39hYJAwR40 enablejsapi 1  frameborder  0  allowfullscreen gt  lt  iframe gt      lt br   gt  lt br   gt      lt a href  javascript    onClick  toggleVideo  hide     gt close lt  a gt

User · Answer

This approach requires jQuery  First  select your iframe   var yourIframe      iframe yourId      yourId or something to select your iframe    Now you select button play pause of this iframe and click it     button ytp-play-button ytp-button   yourIframe  click      I hope it will help you

User · Answer

Here s a jQuery take on RobW s answer for use hiding  pausing an iframe in a modal window       function toggleVideo state            if state     hide                    video-div   modal  hide                document getElementById  video-iframe  id  contentWindow postMessage    event   command   func   pauseVideo   args                                else                   video-div   modal  show                document getElementById  video-iframe  id  contentWindow postMessage    event   command   func   playVideo   args                                The html elements referred to are the modal div itself   video-div  calling the show   hide methods  and the iframe   video-iframe  which has the video url as is src    and has the suffix enablejsapi 1  which enables programmatic control of the player  ex     For more on the html see RobW s answer

User · Answer

I wanted to share a solution I came up with using jQuery that works if you have multiple YouTube videos embedded on a single page   In my case  I have defined a modal popup for each video as follows    lt div id  videoModalXX  gt           lt button onclick  stopVideo videoID    type  button  class  close  gt  lt  button gt               lt iframe width  90   height  400  src    www youtube-nocookie com embed video id rel 0 amp enablejsapi 1 amp version 3  frameborder  0  allowfullscreen gt  lt  iframe gt       lt  div gt    In this case  videoModalXX represents a unique id for the video   Then  the following function stops the video   function stopVideo id            videoModal    id     iframe   0  contentWindow postMessage    event   command   func   pauseVideo   args                  I like this approach because it keeps the video paused where you left off in case you want to go back and continue watching later   It works well for me because it s looking for the iframe inside of the video modal with a specific id   No special YouTube element ID is required   Hopefully  someone will find this useful as well

User · Answer

RobW s way worked great for me  For people using jQuery here s a simplified version that I ended up using   var iframe     video player div  find  iframe     var src     iframe  attr  src             iframe  attr  src       attr  src   src     In this example  video player  is a parent div containing the iframe

User · Answer

just remove src of iframe     button close   click function           iframe   attr  src

User · Answer

RobW s answers here and elsewhere were very helpful  but I found my needs to be much simpler  I ve answered this elsewhere  but perhaps it will be useful here also    I have a method where I form an HTML string to be loaded in a UIWebView   NSString  urlString    NSString stringWithFormat   https   www youtube com embed     videoID    preparedHTML    NSString stringWithFormat    lt html gt  lt body style  background none  text-align center   gt  lt script type  text javascript  src  http   www youtube com iframe api  gt  lt  script gt  lt script type  text javascript  gt var player  function onYouTubeIframeAPIReady   player new YT Player  player    lt  script gt  lt iframe id  player  class  youtube-player  type  text html  width   f  height   f  src     rel 0 amp showinfo 0 amp enablejsapi 1  style  text-align center  border  6px solid  border-radius 5px  background-color transparent   rel nofollow allowfullscreen gt  lt  iframe gt  lt  body gt  lt  html gt    628 0f  352 0f  urlString     You can ignore the styling stuff in the preparedHTML string  The important aspects are    Using the API to create the  YT player  object  At one point  I only had the video in the iFrame tag and that prevented me from referencing the  player  object later with JS  I ve seen a few examples on the web where the first script tag  the one with the iframe api src tag  is omitted  but I definitely needed that to get this working  Creating the  player  variable at the beginning of the API script  I have also seen some examples that have omitted that line  Adding an id tag to the iFrame to be referenced in the API script  I almost forgot that part  Adding  enablejsapi 1  to the end of the iFrame src tag  That hung me up for a while  as I initially had it as an attribute of the iFrame tag  which does not work did not work for me    When I need to pause the video  I just run this    webView stringByEvaluatingJavaScriptFromString   player pauseVideo         Hope that helps

User · Answer

A more concise  elegant  and secure answer  add     enablejsapi 1    to the end of the video URL  then construct and stringify an ordinary object representing the pause command   const YouTube pause video command JSON   JSON stringify Object create null         event              value    command            enumerable   true             func              value    pauseVideo            enumerable   true              Use the Window postMessage method to send the resulting JSON string to the embedded video document       iframe element  is defined elsewhere  const video URL   iframe element getAttributeNS null   src    iframe element contentWindow postMessage YouTube pause video command JSON  video URL     Make sure you specify the video URL for the Window postMessage method   s targetOrigin argument to ensure that your messages won   t be sent to any unintended recipient

User · Answer

You can stop the video by calling the stopVideo   method on the YouTube player instance before hiding the div e g   player stopVideo     For more details see here  http   code google com apis youtube js api reference html Playback controls

User · Answer

Here is a simple jQuery snippet to pause all videos on the page based off of RobW s and DrewT s answers   jQuery  iframe   each function       jQuery this  0  contentWindow postMessage    event   command   func   pauseVideo   args

User · Answer

Since you need to set  enablejsapi true in the src of the iframe before you can use the playVideo   pauseVideo commands mentioned in other answers  it might be useful to add this programmatically via Javascript  especially if  eg  you want this behaviour to apply to videos embedded by other users who have just cut and paste a YouTube embed code   In that case  something like this might be useful   function initVideos           Find all video iframes on the page    var iframes       video   find  iframe          For each of them    for  var i   0  i  lt  iframes length  i             If  enablejsapi  is not set on the iframe s src  set it      if  iframes i  src indexOf  enablejsapi       -1                check whether there is already a query string or not            ie  whether to prefix  enablejsapi  with a     or an   amp          var prefix    iframes i  src indexOf          -1            amp amp          iframes i  src    prefix    enablejsapi true                    if you call this on document ready then all iframes in a div with a class of  video  will have enablejsapi true added to their source  which allows the playVideo   pauseVideo commands to work on them    nb  this example uses jQuery for that one line that sets var iframes  but the general approach should work just as well with pure Javascript if you re not using jQuery

[javascript] How to pause a YouTube player when hiding the iframe?

Examples related to javascript

Examples related to youtube-api

Examples related to youtube-javascript-api