Stop all playing iframe videos on click a link javascript

Question

I have a list of iframe videos in my webpage.

<iframe width="520" height="360" src="http://www.youtube.com/embed/2muxrT5_a6E" frameborder="0" allowfullscreen></iframe>
<iframe width="520" height="360" src="http://www.youtube.com/embed/2muxrT5_a6E" frameborder="0" allowfullscreen></iframe>
<iframe width="520" height="360" src="http://www.youtube.com/embed/2muxrT5_a6E" frameborder="0" allowfullscreen></iframe>
<a href="#" class="close">Stop all videos</a>

I need to stop all playing iframe videos on click the link Stop all videos. How can i do that?

see https://developers.google.com/youtube/iframe_api_reference — OammieR, Nov 28 '12 at 05:54

score 68 · Accepted Answer · answered Nov 28 '12 at 06:02

68

Try this way,

<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
    $('.close').click(function(){      
        $('iframe').attr('src', $('iframe').attr('src'));
    });
});
</script>

answered Nov 28 '12 at 06:02

Swarne27

5,521
7
26
41

3

It's working fine. But the problem is reloading all videos take a long time. Is there any other way or can i make the reload faster? – Sam Hanson Nov 28 '12 at 06:33
iframes are slower because there is an additional overhead for the browser. – Swarne27 Nov 28 '12 at 06:49
and your sources are from external site as well – Swarne27 Nov 28 '12 at 06:50
ok. Thanks a lot. One additional help. How to check the iframe video status that is the video is in playing state or not? – Sam Hanson Nov 28 '12 at 06:51
you need to use YouTube Player API Reference for iframe Embeds. There is a good answer to this in http://stackoverflow.com/questions/8950146/check-if-youtube-video-is-playing-and-run-script and the google reference to the API is here https://developers.google.com/youtube/iframe_api_reference – Swarne27 Nov 28 '12 at 06:58
Thanks a lot for your effort. – Sam Hanson Nov 28 '12 at 07:02
useful, elegant, simple, for anyone who doesnt want to go the youtube js api way – quelquecosa Feb 12 '14 at 18:49
Note that if you have a different video in each iframe then this won't work - it will change the src of all iframes to the src of the first iframe on page. One of the answers below works better using 'this' keyword. – trainoasis Sep 15 '15 at 08:06
language is deprecated – Nov 03 '15 at 20:47
Just tested this out, works well but all videos src is being replaced by first video src. – Abhimanyu Dec 01 '15 at 07:00
This is a godsend. Thank you!! – NYCjbd Mar 03 '21 at 16:32
Not really a solution (Like to close Modal on a page by reloading the entire HTML). Speed is matters and also user experience (Users will notice the reload idea - looks more like a bug). – Ezra Siton Oct 07 '21 at 06:00

score 19 · Answer 2 · answered Jan 08 '14 at 23:42

19

This should stop all videos playing in all iframes on the page:

$("iframe").each(function() { 
        var src= $(this).attr('src');
        $(this).attr('src',src);  
});

answered Jan 08 '14 at 23:42

user163861

375
2
10

Perfect this code will work with different videos on a page. thanks. – Rohit Goel Aug 27 '19 at 16:02

score 19 · Answer 3 · edited Jan 26 '20 at 08:54

19

Reloading all iframes just to stop them is a terrible idea. You should get advantage of what comes with HTML5.

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

var stopAllYouTubeVideos = () => { 
  var iframes = document.querySelectorAll('iframe');
  Array.prototype.forEach.call(iframes, iframe => { 
    iframe.contentWindow.postMessage(JSON.stringify({ event: 'command', 
  func: 'stopVideo' }), '*');
 });
}
stopAllYouTubeVideos();

which will stop all YouTubes iframe videos.

You can use these message keywords to start/stop/pause youtube embdded videos:

stopVideo
playVideo
pauseVideo

Check out the link below for the live demo:

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

PS- YouTube URL must have ?enablejsapi=1 query parameter to make this solution work.

edited Jan 26 '20 at 08:54

Yashwardhan Pauranik

5,370
5
42
65

answered Mar 08 '18 at 12:13

Must Ckr

310
2
5

Brilliant, thanks. Of all the solutions on this page, only this worked without causing flicker to other animations on page. – Y.K. Oct 03 '21 at 22:39
Here's a one liner for stopping one video, that works in MSIE also: document.getElementById('_video').contentWindow.postMessage(JSON.stringify({ event: 'command', func: 'stopVideo' }), '*'); – Y.K. Nov 29 '21 at 23:53

Avatar · Answer 4 · 2016-02-24T05:32:56.810

10

Stopping means pausing and setting the video to time 0:

        $('iframe').contents().find('video').each(function () 
        {
            this.currentTime = 0;
            this.pause();
        });

This jquery code will do exactly that.

No need to replace the src attribute and reload the video again.

Little function that I am using in my project:

    function pauseAllVideos() 
    { 
        $('iframe').contents().find('video').each(function () 
        {
            this.pause();
        });
        $('video').each(function () 
        {
            this.pause();
        });
    }

edited Feb 24 '16 at 05:32

answered Jul 01 '15 at 08:10

Avatar

14,622
9
119
198

7

It is denying permission to access 'document' – sundeepg Feb 24 '16 at 05:15
It works in all my projects. I have added the function that I am using above. – Avatar Feb 24 '16 at 05:33
5

The iframe contents and the app must be in the same domain! – vijayst Nov 23 '16 at 03:08
perfect script bro :D – Murilo Melo Sep 27 '18 at 12:30
removing the src and adding it back already resets the video to the start, – Uriel Sep 04 '20 at 18:42

Ludolfyn · Answer 5 · 2021-06-22T16:34:28.333

9

Here's a vanilla Javascript solution in 2019

const videos = document.querySelectorAll('iframe')
const close = document.querySelector('.close')

close.addEventListener('click', () => {
   videos.forEach(i => {
      const source = i.src
      i.src = ''
      i.src = source
   })
})

edited Jun 22 '21 at 16:34

answered Sep 09 '19 at 15:12

Ludolfyn

1,806
14
20

1

great and elegant answer! – Uriel Sep 04 '20 at 18:42
1

worked for me for multiple videos on same page. – Vijay Dhanvai Apr 13 '21 at 06:36
1

Its working fine in ReactJS with Bootstrap carousel. – Raeesh Alam Aug 24 '21 at 06:33

score 2 · Answer 6 · edited Mar 21 '14 at 08:28

I edited the above code a little and the following worked for me.......

<script>
function stop(){<br/>
       var iframe = document.getElementById('myvid');<br/>
     var iframe1 = document.getElementById('myvid1');<br/>
      var iframe2 = document.getElementById('myvid2');<br/>
    iframe.src = iframe.src;<br/>
    iframe1.src=iframe1.src;<br/>
    iframe2.src=iframe2.src;<br/>
}<br/>

</script>

score 1 · Answer 7 · edited Apr 14 '15 at 11:10

1

$("#close").click(function(){
  $("#videoContainer")[0].pause();
});

edited Apr 14 '15 at 11:10

PavKR

1,591
2
11
26

answered Apr 14 '15 at 10:57

krunal

11
1

score 0 · Answer 8 · answered Jun 23 '17 at 09:30

You can modify this code with an iteration

/**
 * Stop an iframe or HTML5 <video> from playing
 * @param  {Element} element The element that contains the video
 */
var stopVideo = function ( element ) {
    var iframe = element.querySelector( 'iframe');
    var video = element.querySelector( 'video' );
    if ( iframe ) {
        var iframeSrc = iframe.src;
        iframe.src = iframeSrc;
    }
    if ( video ) {
        video.pause();
    }
};

OWNER: https://gist.github.com/cferdinandi/9044694 also posted here (by me): how to destroy bootstrap modal window completely?

score 0 · Answer 9 · answered Apr 13 '21 at 06:39

0

In jQuery you can stop iframe or html video, by using below code.
This will work for single or multiple video on the same page.

var  videos = document.querySelectorAll('iframe');
 
$(".video-modal .fa-times").on("click", function () {
        videos.forEach(i => {
          let source = i.src;
          i.src = '';
          i.src = source;
       });
        $(".video-modal").css("display", "none");
        return false;
    });

})

answered Apr 13 '21 at 06:39

Vijay Dhanvai

1,054
3
13
22

this is actually the most hackful ( although the only working for y case ). I'm stuck in a cycle where YT iframe apis are creating players with NO METHODS attached (playVideo, seekTo etc ). I fall back to plain iframe and seems all the postMessage are being blocked by youtube – Davide Arcinotti Nov 24 '21 at 10:42

score -1 · Answer 10 · answered Nov 28 '12 at 05:43

-1

Reload all iframes again to stop videos

<a href="#" class="close" onclick="stop();">Stop all videos</a>

function stop(){
    var iframe = document.getElementById('youriframe');
    iframe.src = iframe.src;
}

answered Nov 28 '12 at 05:43

Murali N

3,451
4
27
38

1

It's working for single video only. If multiple videos are playing it didn't work. – Sam Hanson Nov 28 '12 at 06:15

Stop all playing iframe videos on click a link javascript

10 Answers10

Linked