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=";byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                <iframe class="show-2" style="display: none;" id="vid1" src=";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/134243242">video 1</a>
<a id="video" class="video-2" data-media="//www.vimeo/00102102">Video 2</a>

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./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./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./134243242">video 1</a>
<a id="video" class="video-2" data-media="//www.vimeo./00102102">Video 2</a>

• javascript
• jquery

• Possible duplicate: stackoverflow./questions/13598423/… – Rory McCrossan Commented Jan 4, 2017 at 16:46
• 1 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 Commented Jan 4, 2017 at 16:47
• @RoryMcCrossan can you share an example please? that might help me. – Bob Commented Jan 4, 2017 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 Commented Jan 4, 2017 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 Commented Jan 4, 2017 at 16:54

4 Answers 4

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

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

video.pause()
video.currentTime = 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();
    });

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./ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link rel="stylesheet" href="style.css">

    <script src="//cdnjs.cloudflare./ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare./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./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./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"));
  });
});