Play and stop Vimeo video placed in Bootstrap modal

Question

I have a Vimeo iframe video in Bootstrap video. I need to have it start playing when I trigger modal and stop playing when a modal is closed. Currently I can have in start playing on modal open by having iframe with no src attribute and having it filled with jQuery on triggering modal. This is the code snippet;

    jQuery("#videogumb").click(function() {
    jQuery('#myModal .modal-body iframe').attr('src','the-source-code');
    });

This works fine and I get it to start when modal opens but when I close modal the music keeps playing in the background.

The other method works fine when but only for closing the modal without having it set to autoplay. So the autoplay is set to 0 and I have this snippet;

    jQuery(".modal-backdrop, #myModal .close, #myModal .btn").live("click", function() {
    jQuery("#myModal iframe").attr("src", jQuery("#myModal iframe").attr("src"));
    });

This stops the video when I close modal. I need to have this combined somehow. I need to have it autoplay when modal opens and to stop playing when modal closes.

Any clues?

Thanks.

Answer 1

To add to eroedig's answer, check out Vimeo's documentation Calling the API with Froogaloop.

1. Add ?api=1&player_id=vimeoplayer in your universal embed code like:

<iframe src="//player.vimeo.com/video/116160160?api=1&player_id=vimeoplayer&title=0&amp;byline=0&amp;portrait=0" name="vimeoplayer" id="nofocusvideo" width="615" height="346" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

2. Note - i gave it an id named 'nofocusvideo' that will be seen here:

var iframe = document.getElementById('nofocusvideo');

3. Declare 2 variable above eroedig's JS like:

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
var iframe = document.getElementById('nofocusvideo');
// $f == Froogaloop
var player = $f(iframe);

$('.modal').on('hidden.bs.modal', function () {
player.api('pause');
})

$('.modal').on('shown.bs.modal', function () {
player.api('play');
})
</script>

Answer 2

I tried using froogaloop2 but it always returned this error: Cannot read property 'ready' of undefined

Instead you can simply use postMessage to call play and pause on the video inside the iframe.

$(document).ready(function() {  
  var $iframe = $('#nofocusvideo'),
      contentWindow = $iframe[0].contentWindow,
      targetOriginUrl = $iframe.attr('src').split('?')[0];
  $('.modal').on('hidden.bs.modal', function () {
    contentWindow.postMessage({ 'method': 'pause' }, targetOriginUrl);
  });
  $('.modal').on('shown.bs.modal', function () {
    contentWindow.postMessage({ 'method': 'play' }, targetOriginUrl);
  });
});

Answer 3

So I tried all the suggestions here and nothing was working quite as well as the updated documentation from Vimeo .. https://github.com/vimeo/player.js#pause-promisevoid-error

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);

$('.modal').on('hidden.bs.modal', function () {
	player.pause();
})

$('.modal').on('shown.bs.modal', function () {
	player.play();
})

</script>

Answer 4

I accomplished this by calling both the Bootstrap Modal API and Vimeo API, code below. You will need to include Vimeo's Froogaloop script as well, also below.

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

$('.modal').on('hidden.bs.modal', function () {
player.api('pause');
})

$('.modal').on('shown.bs.modal', function () {
player.api('play');
})

Answer 5

Refer to Vimeo's embedding documentation.

There is an attribute that you can set called autoplay. They note that it might not work on some devices, but setting this attribute to 1 (or maybe true) should help.

The code might look something like this:

jQuery('#myModal .modal-body iframe').attr({
    src: 'the-source-code',
    autoplay: 1
});