Stop embedded youtube iframe

Question

I m using YouTube iframe to embed videos on my site    lt iframe width  100   height  443  class  yvideo  id  p1QgNF6J1h0                src  http   www youtube com embed p1QgNF6J1h0 rel 0 amp controls 0 amp hd 1 amp showinfo 0 amp enablejsapi 1                frameborder  0  allowfullscreen gt   lt  iframe gt    And i have multiplie videos on the same page   I want to stop all of them or one of them in a click of a button using javascript or so   Is it possible   UPDATE   I tried what Talvi Watia said and used       myStopClickButton   click function          yvideo   each function          this  stopVideo                I m getting   Uncaught TypeError  Object  object Object  has no method  stopVideo

User · Answer

For a Twitter Bootstrap modal popup with a video inside  this worked for me    x000D   x000D      modal stop-video-on-close   on  hidden bs modal   function e    x000D        video-to-stop   this  each function     x000D      this contentWindow postMessage    event   command   func   stopVideo   args              x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  integrity  sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   lt div id  vid  class  modal stop-video-on-close  x000D    tabindex  -1  role  dialog  aria-labelledby  Title  gt  x000D     lt div class  modal-dialog  role  document  gt  x000D       lt div class  modal-content  gt  x000D         lt div class  modal-header  gt  x000D           lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  x000D             lt span aria-hidden  true  gt  amp times  lt  span gt  x000D           lt  button gt  x000D           lt h4 class  modal-title  gt Title lt  h4 gt  x000D         lt  div gt  x000D         lt div class  modal-body  gt  x000D          lt iframe class  video-to-stop center-block  x000D          src  https   www youtube com embed 3q4LzDPK6ps enablejsapi 1 amp rel 0  x000D          allow  accelerometer  autoplay  encrypted-media  gyroscope  picture-in-picture  x000D          frameborder  0  allowfullscreen gt  x000D          lt  iframe gt  x000D         lt  div gt  x000D         lt div class  modal-footer  gt  x000D           lt button class  btn btn-danger waves-effect waves-light  x000D            data-dismiss  modal  type  button  gt Close lt  button gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt button class  btn btn-success  data-toggle  modal  x000D   data-target   vid  type  button  gt Open video modal lt  button gt  x000D   x000D   x000D    Based on Marco s answer  notice that I just needed to add the enablejsapi 1 parameter to the video URL  rel 0 is just for not displaying related videos at the end   The JS postMessage function is what does all the heavy lifting  it actually stops the video   The snippet may not display the video due to request permissions  but in a regular browser this should work as of November of 2018

User · Answer

Here is a codepen  it worked for me   I was searching for the simplest solution for embedding the YT video within an iframe  and I feel this is it   What I needed was to have the video appear in a modal window and stop playing when it was closed  Here is the code    from  https   codepen io anon pen GBjqQr        lt div gt  lt a href     class  play-video  gt Play Video lt  a gt  lt  div gt       lt div gt  lt a href     class  stop-video  gt Stop Video lt  a gt  lt  div gt       lt div gt  lt a href     class  pause-video  gt Pause Video lt  a gt  lt  div gt        lt iframe class  youtube-video  width  560  height  315  src  https   www youtube com embed glEiPXAYE-U enablejsapi 1 amp version 3 amp playerapiid ytplayer  frameborder  0  allowfullscreen gt  lt  iframe gt      a play-video   click function            youtube-video   0  contentWindow postMessage    event   command   func        playVideo        args                      a stop-video   click function            youtube-video   0  contentWindow postMessage    event   command   func        stopVideo        args                      a pause-video   click function            youtube-video   0  contentWindow postMessage    event   command   func        pauseVideo        args                    Additionally  if you want it to autoplay in a DOM-object that is not yet visible  such as a modal window  if I used the same button to play the video that I was using to show the modal it would not work so I used THIS   https   www youtube com embed EzAGZCPSOfg autoplay 1 amp enablejsapi 1 amp version 3 amp playerapiid ytplayer   Note  The  autoplay 1 amp  where it s placed and the use of the   amp   before the next property to allow the pause to continue to work

User · Answer

How we Pause stop YouTube iframe to when we use  embed videos in modalpopup      close one   click function  e                                 let link   document querySelector   divclass      get iframe class           let link   document querySelector   divid      get iframe id          let video src   link getAttribute  src                  youtube-video   children  iframe   attr  src           set iframe parent div value null               youtube-video   children  iframe   attr  src   video src     set iframe src again it works perfect

User · Answer

You may want to review through the Youtube JavaScript API Reference docs   When you embed your video s  on the page  you will need to pass this parameter   http   www youtube com v VIDEO ID version 3 amp enablejsapi 1   If you want a stop all videos button  you can setup a javascript routine to loop through your videos and stop them   player stopVideo     This does involve keeping track of all the page IDs for each video on the page  Even simpler might be to make a class and then use jQuery each       myStopClickButton   click function          myVideoClass   each function          this  stopVideo

User · Answer

Easiest ways is   var frame   document getElementById  iframeid    frame contentWindow postMessage    event   command   func   pauseVideo   args

User · Answer

APIs are messy because they keep changing  This pure javascript way worked for me     lt div id  divScope  class  boom-lightbox  style  display  none   gt       lt iframe id  ytplayer  width  720  height  405    src  https   www youtube com embed M7lc1UVf-VE  frameborder  0  allowfullscreen gt      lt  iframe gt     lt  div gt       if I want i can set scope to a specific region var myScope   document getElementById  divScope            otherwise set scope as the entire document   var myScope   document     if there is an iframe inside maybe embedded multimedia video audio  we should reload so it stops playing var iframes   myScope getElementsByTagName  iframe    if  iframes    null        for  var i   0  i  lt  iframes length  i              iframes i  src   iframes i  src    causes a reload so it stops playing  music  video  etc

User · Answer

see also How to pause or stop an iframe youtube video when you leave a tab view or minimise your Ionic App   scope stopVideo   function      var iframe   document getElementsByTagName  iframe   0  contentWindow   iframe postMessage    event   command   func      stopVideo         args

User · Answer

If anyone is still looking for the answer  i ve solved it like so       photos   on  hide  function        var leg     videoPlayer   attr  src            videoPlayer   attr  src  leg         Where  photos is the ID of the modal and  videoPlayer is the class of the iframe  Basically it refreshes the src attribute  and stops playing the video   So           myStopClickButton   click function              yvideo   each function            var el src     this  attr  src              this  attr  src  el src                       should do the trick

User · Answer

One cannot simply overestimate this post and answers thx OP and helpers  My solution with just video id exchanging    lt div style  pointer-events  none   gt       lt iframe id  myVideo  src  https   www youtube com embed video id rel 0 amp modestbranding 1 amp fs 0 amp controls 0 amp autoplay 1 amp showinfo 0 amp version 3 amp enablejsapi 1  width  560  height  315  frameborder  0  gt  lt  iframe gt   lt  div gt        lt button id  play  gt PLAY lt  button gt        lt button id  pause  gt PAUSE lt  button gt         lt script gt              play   click function                     myVideo   each function                     var frame   document getElementById  myVideo                    frame contentWindow postMessage                         event   command   func   playVideo   args                                                                             pause   click function                     myVideo   each function                     var frame   document getElementById  myVideo                    frame contentWindow postMessage                       event   command   func   pauseVideo   args                                                                  lt  script gt

User · Answer

Talvi s answer may still work  but that Youtube Javascript API has been marked as deprecated  You should now be using the newer Youtube IFrame API   The documentation provides a few ways to accomplish video embedding  but for your goal  you d include the following     load the IFrame Player API code asynchronously var tag   document createElement  script     tag src    https   www youtube com iframe api   var firstScriptTag   document getElementsByTagName  script   0   firstScriptTag parentNode insertBefore tag  firstScriptTag      will be youtube player references once API is loaded var players          gets called once the player API has loaded function onYouTubeIframeAPIReady             myiframeclass   each function             var frame     this              create each instance using the individual iframe id         var player   new YT Player frame attr  id              players push player                global stop button click handler     mybutton   click function           loop through each Youtube player instance and call stopVideo       for  var i in players            var player   players i           player stopVideo

User · Answer

x000D   x000D      aboutVideo  close   on  click  function    x000D     var reSrc       aboutPlayer   attr  src    x000D         aboutPlayer   attr  src  reSrc  x000D       x000D   aboutVideo  x000D   width  100   x000D   height  100   x000D    x000D   aboutVideo  modal-dialog   aboutVideo  modal-dialog  modal-content   aboutVideo  modal-dialog  modal-content  modal-body  x000D   width  100   x000D   height  100   x000D   margin  0  important  x000D   padding  0  important  x000D    x000D   aboutVideo  modal-header  x000D   padding  0px   x000D   border-bottom  0px solid  e5e5e5   x000D   position  absolute  x000D   right  4   x000D   top  4   x000D    x000D   aboutVideo  modal-header  close  x000D   opacity  1  x000D   position  absolute  x000D   z-index  99  x000D   color   fff  x000D    x000D   aboutVideo  modal-header button close  x000D        border-radius  50   x000D      width  7vw  x000D      height  7vw  x000D      position  absolute  x000D      right  4   x000D      top  7   x000D      background  aliceblue  x000D    x000D   aboutVideo  modal-header button close hover  x000D   background-color  rgba 255  255  255  0 28   x000D    x000D   aboutVideo  modal-header button close img  x000D   width  20px  x000D   margin-top  -0 2vw  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt  -- Latest compiled and minified CSS -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   x000D   lt  -- Optional theme -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap-theme min css  integrity  sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl Sp  crossorigin  anonymous  gt  x000D   x000D   lt  -- Latest compiled and minified JavaScript -- gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  integrity  sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa  crossorigin  anonymous  gt  lt  script gt  x000D   lt li class  see-video fa  type  button  data-toggle  modal  data-target   aboutVideo  gt  x000D      lt label gt SEE VIDEO lt  label gt  x000D     lt  li gt  x000D   lt div class  modal fade  id  aboutVideo  tabindex  -1  role  dialog  aria-labelledby  aboutVideoLabel  gt  x000D     lt div class  modal-dialog  role  document  gt  x000D      lt div class  modal-content  gt  x000D       lt div class  modal-header  gt  x000D        lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  lt img src  http   www freeiconspng com uploads white-close-button-png-16 png  gt  lt  span gt  lt  button gt  x000D       lt  div gt  x000D       lt div class  modal-body  gt  x000D       lt iframe class  aboutPlayer  width  100   height  100   src  https   www youtube com embed fju9ii8YsGs autoplay 0 amp showinfo 0 amp controls 2 amp rel 0  frameborder  0  allowfullscreen poster  https   www google co in url sa i amp rct j amp q  amp esrc s amp source images amp cd  amp cad rja amp uact 8 amp ved 0ahUKEwiOvaagmqfWAhUHMY8KHUuJCnkQjRwIBw amp url http 3A 2F 2Fnodeframework com 2F amp psig AFQjCNEaHveDtZ81veNPSvQDx4IqaE Tzw amp ust 1505565378467268  gt  lt  iframe gt  x000D       lt  div gt  x000D      lt  div gt  x000D     lt  div gt  x000D    lt  div gt  x000D   x000D   x000D

User · Answer

Unfortunately these API s evolve very fast  As of May 2015  the proposed solutions don t work anymore  as the player object has no stopVideo method   A reliable solution is to be found in this page  1  and it works with an    lt iframe id  youtube player  class  yt player iframe  width  640  height  360  src  http   www youtube com embed aHUBlv5 K8Y enablejsapi 1 amp version 3 amp playerapiid ytplayer   allowfullscreen  true  allowscriptaccess  always  frameborder  0  gt  lt  iframe gt    and the following JS jQuery code       yt player iframe   each function      this contentWindow postMessage    event   command   func   stopVideo   args

User · Answer

Here s a pure javascript solution    lt iframe  width  100    height  443   class  yvideo   id  p1QgNF6J1h0  src  http   www youtube com embed p1QgNF6J1h0 rel 0 amp controls 0 amp hd 1 amp showinfo 0 amp enablejsapi 1  frameborder  0   allowfullscreen gt   lt  iframe gt   lt button id  myStopClickButton  gt Stop lt  button gt     lt script gt  document getElementById  myStopClickButton   addEventListener  click      function evt   var video   document getElementsByClassName  yvideo    for  var i 0  i lt video length  i         video item i  contentWindow postMessage    event   command   func   stopVideo   args

[javascript] Stop embedded youtube iframe?

Examples related to javascript

Examples related to html

Examples related to iframe

Examples related to youtube-api