Avada modal Vimeo video continues playing after being closed

Question

Here's the site: http://neillieleadershipgroup.com/

On the homepage, you'll see a video play button. Click on it to open a modal window which contains the video. Video is not set to autoplay. When you close the modal window, the audio from the video continues playing.

I've spent hours researching this, and I've tried adding numerous "bootstrap" modal video javascript codes to the header and footer, and nothing has worked thus far.

I don't know much about javascript/jquery, but I know a decent amount about HTML and CSS. I've searched the site source, but I can't seem to find the technology behind this modal, i.e. whether it's using bootstrap or something else -- in other words I cannot find the script that controls the modal.

This is one article I've already read and tried to no avail:
Play and stop Vimeo video placed in Bootstrap modal
Same with this one:
Audio from vimeo video continues after modal has closed
And there are many others as well that were no help to me.

Here's the HTML that creates the modal:

<div class="fusion-modal modal fade modal-1 homepage-video in" tabindex="-1" role="dialog" aria-labelledby="modal-heading-1" aria-hidden="false" id="homepage-video" style="display: block;">
 <div class="modal-dialog modal-lg">
  <div class="modal-content fusion-modal-content" style="background-color:#f6f6f6">
   <div class="modal-header">
    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">×</button>
     <h3 class="modal-title" id="modal-heading-1" data-dismiss="modal" aria-hidden="true" data-fontsize="28" data-lineheight="36"></h3>
   </div>
    <div class="modal-body">
     <iframe src="https://player.vimeo.com/video/151703999?title=0&amp;byline=0&amp;portrait=0&amp;api=1&amp;player_id=player_1&amp;wmode=opaque" width="710" height="399" frameborder="0" allowfullscreen="allowfullscreen" id="player_1"></iframe>
    </div>
   </div>
  </div>
</div>

Again if I could find the JS for the modal, I would provide that as well.

Here's the most recent jquery I tried (to stop playing video upon modal close), which didn't work (added to both header and footer):

  videoSRC = $('iframe#player_1').attr('src');
   $('button.close').click(function () {
   $(' iframe#player_1').attr('src', videoSRC);
   });

   $('.homepage-video').on('hidden.bs.modal', function (e) {
   $(' iframe#player_1').attr('src', videoSRC);
   });

Any help is much appreciated. Thanks!

Answer 1

You can do that easily using Vimeo JS API. Download and upload player.js from this link to your wordpress theme folder: https://github.com/vimeo/player.js/blob/master/dist/player.min.js

Once uploaded you can fire the event like this using jquery:-

jQuery(document).ready(function($) {

    var jqueryPlayer = new Vimeo.Player($('iframe#player_1'));

    $('.homepage-video').on('hidden.bs.modal', function (e) {
        jqueryPlayer.pause();
    });

});

It will solve your issue.(y)