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