CSS Codes
CSS Layouts
View RSS Feed

molendijk

Embedding and programmatically controlling multiple YouTube videos

Rate this Entry
2 Comments
by
molendijk
, 12-02-2014 at 08:09 PM (19497 Views)
We can embed and programmatically control multiple YouTube videos by putting onloads like the following in (existing) iframes:
onload="player1=new YT.Player(this)"
onload="player2=new YT.Player(this)"
etc.

The names for the players (here: player 1 and player2) are arbitrarily chosen. They must be used for selecting the video for which we want to execute javascript (video) code. For instance, player2.playVideo() means that the video associated with player2 must start playing etc .

This will only work if we have this in the head:
<script src="http://www.youtube.com/player_api"></script>
and if the video-url in the iframe contains html5=1 (IE-requirement) and enablejsapi=1.

Demos and more info here.

EDIT:
I delved a bit further into the matter and found a way to not only apply javascript to the videos loaded in an existing (HTML) iframe, but also to their different states, see this and comment#2.

Submit "Embedding and programmatically controlling multiple YouTube videos" to del.icio.us Submit "Embedding and programmatically controlling multiple YouTube videos" to StumbleUpon Submit "Embedding and programmatically controlling multiple YouTube videos" to Google Submit "Embedding and programmatically controlling multiple YouTube videos" to Digg

Updated 12-07-2014 at 04:15 PM by molendijk

Tags: None Add / Edit Tags
Categories
Uncategorized

Comments

  1. molendijk's Avatar
    Here are two examples:
    Code:
    <head>
<script src="http://www.youtube.com/player_api"></script> 
</head>

<body>
<div style="position: relative; width: 319px">
<div style="position: relative; text-align: center">
<button style="cursor: pointer" onclick="player1.loadVideoById('bKZbvluHcNo')">(re)start</button>
<button style="cursor: pointer" onclick="player1.playVideo()">play</button>
<button style="cursor: pointer" onclick="player1.pauseVideo()">pause</button><br>
<button style="cursor: pointer" onclick="player1.seekTo(player1.getDuration())">stop</button>
<button style="cursor: pointer" onclick="player1.unMute()">sound on</button>
<button style="cursor: pointer" onclick="player1.mute()">sound off</button>
</div>
<iframe style="position: relative; width: 319px; height: 280px;  border: 1px solid black; " src="http://www.youtube.com/embed/bKZbvluHcNo?html5=1&amp;enablejsapi=1&amp;autoplay=0&amp;rel=0&amp;showinfo=0&amp;modestbranding=1&amp;controls=1&amp;autohide=0&amp;vq=large" frameborder="0" allowfullscreen onload="player1=new YT.Player(this)"></iframe>
</div>

<div style="position: relative; width: 319px">
<div style="position: relative; text-align: center">
<button style="cursor: pointer" onclick="player2.loadVideoById('OsLap6ZNNQo')">(re)start</button>
<button style="cursor: pointer" onclick="player2.playVideo()">play</button>
<button style="cursor: pointer" onclick="player2.pauseVideo()">pause</button><br>
<button style="cursor: pointer" onclick="player2.seekTo(player2.getDuration())">stop</button>
<button style="cursor: pointer" onclick="player2.unMute()">sound on</button>
<button style="cursor: pointer" onclick="player2.mute()">sound off</button>
</div>
<iframe style="position: relative; width: 319px; height: 280px;  border: 1px solid black; " src="http://www.youtube.com/embed/OsLap6ZNNQo?html5=1&amp;enablejsapi=1&amp;autoplay=0&amp;rel=0&amp;showinfo=0&amp;modestbranding=1&amp;controls=1&amp;autohide=0&amp;vq=large" frameborder="0" allowfullscreen onload="player2=new YT.Player(this)"></iframe>
</div>
</body>
  2. molendijk's Avatar
    I found a way to not only apply javascript to the videos loaded in an existing (HTML) iframe, but also to their different states. If we want to run code depending on the player's state, we must do
    Code:
    onload="some_player=new YT.Player(this ,{events: {'onStateChange':function(e){if(e.data === some_state){some_function()}}}})"
    See this for all the details.