php - Vimeo video still running on background after minimizing the pop up -

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

but need stop video on closing of 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 me stop video on close? in advance

since using bootstrap modal can listen hidden.bs event, gets fired when modal hidden.

bootstrap modal events

hidden.bs.modal

this event fired when modal has finished being hidden user (will wait css transitions complete).

inside eventhandler clear iframe src attribute so.

$('#videomodel').on('hidden.bs.modal', function (e) {     $('iframe').attr('src', ''); }) 

to fill iframe src attribute when modal being shown can pass using data attribute on element triggered modal.

varying modal content based on trigger button

have bunch of buttons trigger same modal, different contents? use event.relatedtarget , html data-* attributes (possibly via jquery) vary contents of modal depending on button clicked. see modal events docs details on relatedtarget,

<a class="arw-link"      data-toggle="modal"     data-target=".video-modal"     href="#"     data-video-src="https://your-video-url"> <!-- video url goes here!!! -->     watch film  <span class="glyphicon glyphicon-menu-right"></span> </a> 

then listen modal show , add value of data-video-src iframe src.

$('#videomodel').on('show.bs.modal', function (event) {     var button = $(event.relatedtarget);     var videosrc = button.data('video-src');     var modal = $(this);     modal.find('iframe').attr('src', videosrc); }) 

---

here fiddle, since can't use iframes in snippets.