javascript - How to stop Vimeo video when Bootstrap modal is dismissed?

I have a Vimeo modal that works wonderfully and - after some effort - I've gotten the video to stop when the modal is closed via the 'X' button. However, since I put the close function on the 'X' button, if the user clicks away from the video to close the modal rather than using the button, the video keeps playing.

Here is the HTML where I call the stopVideo() function with onclick:

<div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="stopVideo()">
      <span aria-hidden="true">&times;</span>
   </button>
</div>

And here is the Javascript function that stops the video:

<script>
 function stopVideo(){
     var $frame = $('iframe#nofocusvideo');

    // saves the current iframe source
    var vidsrc = $frame.attr('src');

    // sets the source to nothing, stopping the video
    $frame.attr('src',''); 

    // sets it back to the correct link so that it reloads immediately on the next window open
    $frame.attr('src', vidsrc);
}
</script>

So, how can I alter the function to apply not to the specific close button, but to any instance where the modal loses focus such as clicking away from the video?

I'm a novice, so go easy on me. Thanks in advance!

EDIT 1:

I've changed the script to the following:

<script>
    function stopVideo(){
     var $frame = $('iframe#nofocusvideo');

    // saves the current iframe source
    var vidsrc = $frame.attr('src');

    // sets the source to nothing, stopping the video
    $frame.attr('src',''); 

    // sets it back to the correct link so that it reloads immediately on the next window open
    $frame.attr('src', vidsrc);
    }

    $('#promo-video').on('hidden.bs.modal', function (e) {
        stopVideo();
    })
</script>

The stopVideo() function is not being called. Any idea what I'm doing wrong?

EDIT 2: Here's the code for the modal in question:

<!-- VIDEO MODAL -->
    <div class="modal fade" id="promo-video" tabindex="-1" role="dialog" aria-labelledby="modal-video-label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="stopVideo()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="modal-video">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe id="nofocusvideo" src=";player_id=vimeoplayer" name="vimeoplayer" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- End Video Modal -->

Here is the HTML where I call the stopVideo() function with onclick:

<div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="stopVideo()">
      <span aria-hidden="true">&times;</span>
   </button>
</div>

And here is the Javascript function that stops the video:

<script>
 function stopVideo(){
     var $frame = $('iframe#nofocusvideo');

    // saves the current iframe source
    var vidsrc = $frame.attr('src');

    // sets the source to nothing, stopping the video
    $frame.attr('src',''); 

    // sets it back to the correct link so that it reloads immediately on the next window open
    $frame.attr('src', vidsrc);
}
</script>

So, how can I alter the function to apply not to the specific close button, but to any instance where the modal loses focus such as clicking away from the video?

I'm a novice, so go easy on me. Thanks in advance!

EDIT 1:

I've changed the script to the following:

<script>
    function stopVideo(){
     var $frame = $('iframe#nofocusvideo');

    // saves the current iframe source
    var vidsrc = $frame.attr('src');

    // sets the source to nothing, stopping the video
    $frame.attr('src',''); 

    // sets it back to the correct link so that it reloads immediately on the next window open
    $frame.attr('src', vidsrc);
    }

    $('#promo-video').on('hidden.bs.modal', function (e) {
        stopVideo();
    })
</script>

The stopVideo() function is not being called. Any idea what I'm doing wrong?

EDIT 2: Here's the code for the modal in question:

<!-- VIDEO MODAL -->
    <div class="modal fade" id="promo-video" tabindex="-1" role="dialog" aria-labelledby="modal-video-label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="stopVideo()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="modal-video">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe id="nofocusvideo" src="https://player.vimeo.com/video/180565514?api=1&player_id=vimeoplayer" name="vimeoplayer" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- End Video Modal -->

Share Improve this question edited Sep 17, 2016 at 12:35 asked Sep 17, 2016 at 11:07 Omar Rida 1331 gold badge2 silver badges11 bronze badges

you should read up on modal events you want the hidden.bs.modal. getbootstrap.com/javascript/#modals – Bosc Commented Sep 17, 2016 at 11:18
Hey @Bosc, I've added an edit to my question, would you mind giving it a look? I can't seem to figure out what I'm doing wrong. – Omar Rida Commented Sep 17, 2016 at 11:47
Just tested and it works for me, make sure #promo-video is the same id you gave your modal – Bosc Commented Sep 17, 2016 at 12:22
I've confirmed it's the same id for the modal, and it stops when I click on the 'X' button, but the video keeps playing if I click away from the video and the modal disappears. Any ideas? I tested on both Chrome and Safari, no dice. I've added the modal HTML to the question. – Omar Rida Commented Sep 17, 2016 at 12:33

Add a comment |

5 Answers 5

Sorted by: Reset to default 11

Here's the working code for it using the default bootstrap id's. Not too sure why yours isn't working.

function stopVideo() {
  var $frame = $('iframe#nofocusvideo');

  // saves the current iframe source
  var vidsrc = $frame.attr('src');

  // sets the source to nothing, stopping the video
  $frame.attr('src', '');

  // sets it back to the correct link so that it reloads immediately on the next window open
  $frame.attr('src', vidsrc);
}

$('#myModal').on('hidden.bs.modal', function(e) {
  stopVideo();
})

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <iframe id="nofocusvideo" src="https://player.vimeo.com/video/182738685" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

A solution that work for me is reload the modal contents:

    $("#modal-video").on("hidden.bs.modal", function () {
        var url = $('#video-frame').attr('src');
        $('#video-frame').attr('src', '');
        $('#video-frame').attr('src', url);
    });

After a lot of trial and error, changing the javascript to the following solved my problem:

<script>
       ( function($) {



function iframeModalOpen(){

        $('.modalButton').on('click', function(e) {
            var src = $(this).attr('data-src');
            var width = $(this).attr('data-width') || 640; 
            var height = $(this).attr('data-height') || 360;

            var allowfullscreen = $(this).attr('data-video-fullscreen');

            $("#promo-video iframe").attr({
                'src': src,
                'height': height,
                'width': width,
                'allowfullscreen':''
            });
        });


        $('#promo-video').on('hidden.bs.modal', function(){
            $(this).find('iframe').html("");
            $(this).find('iframe').attr("src", "");
        });
    }

  $(document).ready(function(){
        iframeModalOpen();
  });

  } ) ( jQuery );
    </script>

I have a series of vimeo player in modal and finally figured out a dynamic way to stop the video after closing the modal. Seriously, bootstrap/vimeo should add this as default!!

  $('.modal').on('hidden.bs.modal', function () {
var $this = $(this);
//get iframe on click
 var vidsrc_frame = $this.find("iframe");
var vidsrc_src = vidsrc_frame.attr('src');
 console.log(`videosrc=` + vidsrc_src); 
vidsrc_frame.attr('src', '');
vidsrc_frame.attr('src', vidsrc_src);
});

Have a nice day!

This option is better and dynamic

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to stop Vimeo video when Bootstrap modal is dismissed? - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)