Videos do not stop or pause when you close the modal window

[chrisames]

I found a possible solution but I could not get it to work with the plugin http://gomakethings.com/stopping-youtube-vimeo-and-html5-videos-with-javascript/#comment-22530

[erwstout]

You'll likely have to hook into one of the service's API. For instance this is how I am stopping vimeo playback with Remodal:

// add the modal-video id
$('.flex-video iframe').attr('id', 'modal-video');

$(function() {
    var iframe = $('#modal-video')[0];
    var player = $f(iframe);

    // When the player is ready, add listeners for pause, finish, and playProgress
    player.addEvent('ready', function() {

        player.addEvent('pause');
    });

    // Call the API when a button is pressed
    $('.remodal-close, .remodal-wrapper').bind('click', function() {
        player.api('pause');
    });

});

You also need to include Vimeo's froogaloop2.min.js

Hope that helps.

[TimHalo]

Or for Youtube iframes you can use the closed call back and post message, something like:

$(document).on('closed', '.remodal', function (e) { $(this)[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*'); });

If you have the '?enablejsapi=1&version=3' and script access attribute on your iframe url. e.g:

<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/aXWG_kKDZlY?enablejsapi=1&amp;version=3" frameborder="0" allowfullscreen="" allowscriptaccess="always"></iframe>

[nfourtythree]

Just to riff on @erwstout reply for pausing vimeo videos.

Make sure to include the Vimeo player.js and then the following code should help you out.

$( document ).on( 'closing', '.remodal', function( ev ) {

  var iframe = $( this ).find( 'iframe[src*="vimeo"]' )

  if ( iframe ) {
    var player = new Vimeo.Player( iframe )
    player.pause()
  }

} )

Note I have assume that jQuery is being used