Geek Answers Handbook

How to stop a video on a tab?

I have a tab interface on my website that contains images and videos on YouTube in the last tab. Everything works fine, but every time I switch tabs, the video does not stop playing. Is there any way to fix this? Thanks in advance.

Here is what I got:

Press here

+3
source share
2 answers

Demo . Switching tabs pauses the playback of any videos.

Using the YouTube Player API , you can play / pause / stop the video.

<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 query string ?enablejsapi=1 added to the YouTube embed url in the iframe .

+10
source 
 <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 a detailed view How to pause or stop youtube, vimeo and html5 video when changing tabs

-1
source

More articles:


All Articles