CODEWITHSUNDEEP
javascriptjqueryvideoiframe
Sam Hanson
Sam Hanson

Reputation: 1357

Stop all playing iframe videos on click a link javascript

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?

Upvotes: 32

Views: 141784

Answers (10)

Ludolfyn
Ludolfyn

Reputation: 2075

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
   })
})

Upvotes: 9

Vijay Dhanvai
Vijay Dhanvai

Reputation: 1116

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;
    });

})

Upvotes: 0

Must Ckr
Must Ckr

Reputation: 370

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.

Upvotes: 25

imbatman
imbatman

Reputation: 518

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?

Upvotes: 0

Avatar
Avatar

Reputation: 15166

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();
        });
    }

Upvotes: 11

krunal
krunal

Reputation: 11

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

Upvotes: 1

Yash
Yash

Reputation: 29

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>

Upvotes: 2

user163861
user163861

Reputation: 375

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

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

Upvotes: 19

Swarne27
Swarne27

Reputation: 5737

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>

Upvotes: 70

Murali N
Murali N

Reputation: 3498

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;
}

Upvotes: -1

Related Questions