Stop the video from playing

Question

I have two videos on the same page and they open in an iframe. When I close the popup, the video won't stop. It keeps playing. Due to circumstances beyond my control, I have to work with the videos within iframes.

Could anyone help, below is the code for the same:

jQuery:

$("[data-media]").on("click", function(e) {
    e.preventDefault();
    var $this = $(this);
    var videoUrl = $this.attr("data-media");
    var popup = $this.attr("href");
    var $popupIframe = $(popup).find("iframe");

    $popupIframe.attr("src", videoUrl);



    var left = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var left = left/2 - 340;

    var top = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    var top = top/2 - 180;

    document.getElementById("vid").style.top = top + "px";
    document.getElementById("vid").style.left = left + "px"; 
    document.getElementById("vid1").style.top = top + "px";
    document.getElementById("vid1").style.left = left + "px"; 

    $this.closest(".page").addClass("show-popup");
});

$(".popup").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();

    $(".page").removeClass("show-popup");
});

$(".popup > iframe").on("click", function(e) {
    e.stopPropagation();
});

HTML:

<div class="popup" id="media-popup"> <!-- video embedded -->
                <iframe id="vid" src="http://player.vimeo.com/video/1212121210?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                <iframe class="show-2" style="display: none;" id="vid1" src="http://player.vimeo.com/video/112324343?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>   
                <a class="video-close" href="#0"></a>
            </div><!-- popup -->


<a id="video" data-media="//www.vimeo.com/134243242">video 1</a>
<a id="video" class="video-2" data-media="//www.vimeo.com/00102102">Video 2</a>

Possible duplicate: http://stackoverflow.com/questions/13598423/stop-all-playing-iframe-videos-on-click-a-link-javascript — Rory McCrossan, Jan 04 '17 at 16:46
If possible I'd also suggest you use `video` elements instead of directly setting the `src` of the `iframe` to the video as it gives you far more control - you get the `pause()` method for one. — Rory McCrossan, Jan 04 '17 at 16:47
@RoryMcCrossan can you share an example please? that might help me. — Bob, Jan 04 '17 at 16:50
Your popup is just a html element in the page. Shown or hidden in the form of a popup. But hiding it does not remove the element from the page, so the video will still play, even if you cannot see it. You need to reset the url of the iframe (why do you use iframes for this?) — Seb, Jan 04 '17 at 16:51
@Seb, I had to use this since another coder developed this part of code and its huge data to change everything — Bob, Jan 04 '17 at 16:54

score 1 · Answer 1 · answered Dec 15 '17 at 20:21

This helped me, check it out! click here to go to the original answer

Basically you need to use iframe or video to start player and that code will stop it when you want it.

var stopVideo = function ( element ) {
var iframe = element.querySelector( 'iframe');
var video = element.querySelector( 'video' );
if ( iframe !== null ) {
    var iframeSrc = iframe.src;
    iframe.src = iframeSrc;
}
if ( video !== null ) {
    video.pause();
}
};

Adam Orłowski · Answer 2 · 2020-03-22T16:15:41.843

1

To stop the video, not only pause it, you can set currentTime to 0 like:

video.pause()
video.currentTime = 0

edited Mar 22 '20 at 16:15

answered Mar 05 '18 at 15:12

Adam Orłowski

4,268
24
33

Bryant Makes Programs · Answer 3 · 2017-01-04T16:56:08.713

0

This will 'reset' the src attribute for each iframe, stopping the video.

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

You can also run the following if the iframe is within your domain.

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

edited Jan 04 '17 at 16:56

answered Jan 04 '17 at 16:50

Bryant Makes Programs

1,493
2
17
39

This is not doing anything for me @Bryant – Bob Jan 04 '17 at 16:54

score 0 · Accepted Answer · answered Jan 05 '17 at 15:50

http://plnkr.co/edit/BWPfY8PiYagfb1zIHUEV?p=preview

This plunker helped me to achieve the solution to my question.

HTML:

<head>
    <title>Autostop Videos in Closed Modal</title>

    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link rel="stylesheet" href="style.css">

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Autostop Videos in Closed Modal</h1>

    <ul class="nav" >
      <li><a href="#" data-toggle="modal" data-target="#video1">Video 1</a></li>
      <li><a href="#" data-toggle="modal" data-target="#video2">Video 2</a></li>
    </ul>

    <div class="modal fade" id="video1">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Video 1</h4>
          </div>

          <div class="modal-body">

            <iframe src="//player.vimeo.com/video/108792063" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="video2">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Video 2</h4>
          </div>

          <div class="modal-body">

            <iframe src="//player.vimeo.com/video/69593757" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

          </div>
        </div>
      </div>
    </div>

  </body>

</html>

JS:

$(function(){
  $('.modal').on('hidden.bs.modal', function (e) {
    $iframe = $(this).find("iframe");
    $iframe.attr("src", $iframe.attr("src"));
  });
});

Stop the video from playing

4 Answers4