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 p

Answer 1

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 2

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 3

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

Answer 4

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 5

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