Geek Answers Handbook

Suspend YouTube iframe while playing another

I have several YouTube iFrames embedded in the page. If one of the films is already playing, and the user decides to start playing the other film, is it possible to stop playing the first film so that it can be played only once at a time?

I looked at the YouTube Player API link for iframe Embeds https://developers.google.com/youtube/iframe_api_reference , but to be honest, I just don't get it. My developer skills are very limited .... clearly.

Pitiful I know, but that’s all I have at the moment (iFrames only) ... http://jsfiddle.net/YGMUJ/

<iframe width="520" height="293" src="http://www.youtube.com/v/zXV8GMSc5Vg?version=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe> <iframe width="520" height="293" src="http://www.youtube.com/v/LTy0TzA_4DQ?version=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

I thought I needed to add "& enablejsapi = 1" at the end of the video urls.

Any help would be greatly appreciated.
Thank you in advance.

+6
source share
3 answers

Instead of using iframes, you really want to use the iFrame Player API. Depending on how many videos you really wanted to embed, you can make this javascript more dynamic, but this working example should give you enough to get you started.

Basically what I'm doing here is initializing two players and pausing the opposite video when a player’s state changes to a game.

You can play with the following code at http://jsfiddle.net/mattkoskela/Whxjx/

 <script> var tag = document.createElement('script'); tag.src = "//www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player1 = new YT.Player('player1', { height: '293', width: '520', videoId: 'zXV8GMSc5Vg', events: { 'onStateChange': onPlayerStateChange } }); player2 = new YT.Player('player2', { height: '293', width: '520', videoId: 'LTy0TzA_4DQ', events: { 'onStateChange': onPlayerStateChange } }); } function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING) { stopVideo(event.target.a.id); } } function stopVideo(player_id) { if (player_id == "player1") { player2.stopVideo(); } else if (player_id == "player2") { player1.stopVideo(); } }

+7
source

Here is an extended version of @Matt Koskela . This does not require you to create a video using JavaScript. It works, for example, if videos are created on the PHP side (think Wordpress).

JsFiddle demo here .

 <script> var tag = document.createElement('script'); tag.src = "//www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); function onYouTubeIframeAPIReady() { var $ = jQuery; var players = []; $('iframe').filter(function(){return this.src.indexOf('http://www.youtube.com/') == 0}).each( function (k, v) { if (!this.id) { this.id='embeddedvideoiframe' + k } players.push(new YT.Player(this.id, { events: { 'onStateChange': function(event) { if (event.data == YT.PlayerState.PLAYING) { $.each(players, function(k, v) { if (this.getIframe().id != event.target.getIframe().id) { this.pauseVideo(); } }); } } } })) }); } </script> One: <iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/zXV8GMSc5Vg?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe> <br/> Two: <iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/LTy0TzA_4DQ?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe>

Edit: Check the thin version of Jennie Sadler below if your videos start as thumbnails.

+12
source

The vbence solution is really close, but there is one edit I would suggest. You must check that other players are playing before you pause them, otherwise playing the first insert on the page will play / pause each other embed on the page, remove the preview thumbnail and create amazing side effects.

 <script> var tag = document.createElement('script'); tag.src = "//www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); function onYouTubeIframeAPIReady() { var $ = jQuery; var players = []; $('iframe').filter(function(){return this.src.indexOf('http://www.youtube.com/') == 0}).each( function (k, v) { if (!this.id) { this.id='embeddedvideoiframe' + k } players.push(new YT.Player(this.id, { events: { 'onStateChange': function(event) { if (event.data == YT.PlayerState.PLAYING) { $.each(players, function(k, v) { if (this.getPlayerState() == YT.PlayerState.PLAYING # checks for only players that are playing && this.getIframe().id != event.target.getIframe().id) { this.pauseVideo(); } }); } } } })) }); } </script> One: <iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/zXV8GMSc5Vg?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe> <br/> Two: <iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/LTy0TzA_4DQ?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe>
+2
source

More articles:


All Articles