How to stop video in tab?

问题

I have a tab interface on my website that contains images and a youtube video on the last tab. All works fine however everytime I switch tabs the video doesn't stop playing. Is there a way to fix this? Thanks in advance.

This is what I got:

Click Here

回答1:

DEMO — Switching tabs pauses any playing videos.

By using the YouTube Player API, you can play/pause/stop videos.

<script src="//www.youtube.com/iframe_api"></script>

<iframe width="510" height="287" src="//www.youtube.com/embed/VIDEO_ID?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

<script>
  $(function(){
    $('iframe[src*="//www.youtube.com/embed/"]').each(function(i) {
      this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
    });
  });
</script>

Note the ?enablejsapi=1 query string appended to the YouTube embed URL in the iframe.

回答2:

<iframe class="popup-youtube-player" src="https://www.youtube.com/embed/C0DPdy98e4c?enablejsapi=1&version=3&playerapiid=ytplayer" width="640" height="360" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>

$('.tabs li a').on('click', function() {

$('.popup-youtube-player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); 
});

for detail visit How to pause or stop youtube, vimeo and html5 video on tab change

来源：https://stackoverflow.com/questions/13259744/how-to-stop-video-in-tab