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>