Vimeo video still running on background after minimizing the pop up

Question

I have embedded vimeo video in my site, but when i click outside the pop-up or click the close button of the pop up, the video continues to play in the background.

but i need to stop the video on closing of the pop-up.

<div class="nav-watch">
    <a class="arw-link"  data-toggle="modal" data-target=".video-modal" href="#">
        Watch Film  <span class="glyphicon glyphicon-menu-right"></span>
    </a>
</div>

<div class="modal fade video-modal" id="videomodel" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <button type="button" class="closed" data-dismiss="modal" aria-label="Close">
                <span class="glyphicon glyphicon-remove-circle"></span>
            </button>
            <div class="modal-body">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe src="https://player.vimeo.com/video/105864353" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

Can anybody help me to stop the video on close? Thanks in advance

Answer 1

Thanks all,

Finally i got the solution,

There was short lines of jquery which help me out.

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

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

Also i have made the demo in jsfiddle.

Click here for demo

DEMO