Embedding and programmatically controlling multiple YouTube videos
Simple controls
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: player1 and player2) are arbitrarily chosen. They are used for selecting the video for which we want to execute javascript (video) code. For instance, player1.playVideo() means that the video associated with player1 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.
Two examples:
<head>
<script src="http://www.youtube.com/player_api"></script>
</head>
<body>
<div style="position: relative; width: 319px; height: 280px">
<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: 100%; height: 100%; border: 1px solid black; " src="http://www.youtube.com/embed/bKZbvluHcNo?html5=1&enablejsapi=1&autoplay=0&rel=0&showinfo=0&modestbranding=1&controls=1&autohide=0&vq=large" frameborder="0" allowfullscreen onload="
player1=new YT.Player(this)"></iframe>
</div>
<br><br><br><br>
<div style="position: relative; width: 319px; height: 280px">
<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: 100%; height: 100%; border: 1px solid black; " src="http://www.youtube.com/embed/OsLap6ZNNQo?html5=1&enablejsapi=1&autoplay=0&rel=0&showinfo=0&modestbranding=1&controls=1&autohide=0&vq=large" frameborder="0" allowfullscreen onload="
player2=new YT.Player(this)"></iframe>
</div>
</body>
Applying javascript code to particular states of the video player
If we want to apply javascript code to a particular state of the video player, we can do this:
onload="player1=new YT.Player(this ,{events: {'onStateChange':function(e){if(e.data === some_state){some_function()}}}})"
onload="player2=new YT.Player(this ,{events: {'onStateChange':function(e){if(e.data === some_state){some_function()}}}})"
etc. In this case, we must make sure that each iframe has an ID whose name corresponds with the name of the player
The states of a YouTube-video are -1 (unstarted), 0 (ended), 2 (paused) and 5 (cued), see https://developers.google.com/youtube/iframe_api_reference. So if we want a player, say player3, to produce an alert when the video has come to an end, we could do:
onload="player3=new YT.Player(this ,{events: {'onStateChange':function(e){if(e.data === 0){alert('done')}}}})"
And if we want a player player4 to produce an alert when the video is paused:
onload="player4=new YT.Player(this ,{events: {'onStateChange':function(e){if(e.data === 2){alert('paused')}}}})"
Examples:
<head>
<script src="http://www.youtube.com/player_api"></script>
</head>
<body>
<div style="position: relative; width: 319px; height: 280px">
<div style="position: relative; text-align: center">
<button style="cursor: pointer" onclick="
player3.loadVideoById('bKZbvluHcNo')">(re)start</button>
<button style="cursor: pointer" onclick="
player3.playVideo()">play</button>
<button style="cursor: pointer" onclick="
player3.pauseVideo()">pause</button><br>
<button style="cursor: pointer" onclick="
player3.seekTo(
player3.getDuration())">stop</button>
<button style="cursor: pointer" onclick="
player3.unMute()">sound on</button>
<button style="cursor: pointer" onclick="
player3.mute()">sound off</button>
</div>
<iframe id="
player3" style="position: relative; width: 100%; height: 100%; border: 1px solid black; " src="http://www.youtube.com/embed/bKZbvluHcNo?html5=1&enablejsapi=1&autoplay=0&rel=0&showinfo=0&modestbranding=1&controls=1&autohide=0&vq=large" frameborder="0" allowfullscreen onload="
player3=new YT.Player(this ,{events: {'onStateChange':function(e){if(e.data === 0){alert('done')}}}})"></iframe>
</div>
<br><br><br><br>
<div style="position: relative; width: 319px; height: 280px">
<div style="position: relative; text-align: center">
<button style="cursor: pointer" onclick="
player4.loadVideoById('OsLap6ZNNQo')">(re)start</button>
<button style="cursor: pointer" onclick="
player4.playVideo()">play</button>
<button style="cursor: pointer" onclick="
player4.pauseVideo()">pause</button><br>
<button style="cursor: pointer" onclick="
player4.seekTo(
player4.getDuration())">stop</button>
<button style="cursor: pointer" onclick="
player4.unMute()">sound on</button>
<button style="cursor: pointer" onclick="
player4.mute()">sound off</button>
</div>
<iframe id="
player4" style="position: relative; width: 100%; height: 100%; border: 1px solid black; " src="http://www.youtube.com/embed/OsLap6ZNNQo?html5=1&enablejsapi=1&autoplay=0&rel=0&showinfo=0&modestbranding=1&controls=1&autohide=0&vq=large" frameborder="0" allowfullscreen onload="
player4=new YT.Player(this ,{events: {'onStateChange':function(e){if(e.data === 2){alert('paused')}}}})"></iframe>
</div>
</body>
Applying javascript code to particular states of the video player: a more interesting function
Of course, we want to create functions that do more than just producing an alert when the player is in a particular state. So let's create a more interesting function, one that exploits the following facts:
- a YouTube video loaded in a very small iframe does not display ads, because there's no room for them.
- it does not display ads either when it starts in a small iframe and plays in a big iframe after a couple of seconds.
Function:
<script>
var wwhich_player;
function no_ads(which_player)
{
document.getElementById(which_player).style.width='10px';
document.getElementById(which_player).style.height='10px';
document.getElementById(which_player).style.opacity='0.1';
wwhich_player=which_player;
setTimeout("document.getElementById(wwhich_player).style.width='100%', document.getElementById(wwhich_player).style.height='100%', document.getElementById(wwhich_player).style.opacity='1'",3000)
}
</script>
Onload in a iframe having id="some_player":
onload="some_player=new YT.Player(this ,{events: {'onStateChange':function(e){if(e.data === -1 || e.data === 1){no_ads('some_player')}}}})"
Examples: a single video (player5) and a playlist (player6):
<head>
<script src="http://www.youtube.com/player_api"></script>
<script>
var wwhich_player;
function no_ads(which_player)
{
document.getElementById(which_player).style.width='10px';
document.getElementById(which_player).style.height='10px';
document.getElementById(which_player).style.opacity='0.1';
wwhich_player=which_player;
setTimeout("document.getElementById(wwhich_player).style.width='100%',
document.getElementById(wwhich_player).style.height='100%',
document.getElementById(wwhich_player).style.opacity='1'",3000)
}
</script>
</head>
<body>
<div style="position: relative; width: 419px; height: 380px; background: black; " >
<div style="position: relative; text-align: center; background: white; height: 50px" >
<button style="cursor: pointer" onclick="
player5.loadVideoById('bKZbvluHcNo')">(re)start</button>
<button style="cursor: pointer" onclick="
player5.playVideo()">play</button>
<button style="cursor: pointer" onclick="
player5.pauseVideo()">pause</button><br>
<button style="cursor: pointer" onclick="
player5.cueVideoById('bKZbvluHcNo');">stop</button>
<button style="cursor: pointer" onclick="
player5.unMute()">sound on</button>
<button style="cursor: pointer" onclick="
player5.mute()">sound off</button>
</div>
<iframe id="
player5" style="position: absolute; width: 100%; height: 100%; border-right: 1px solid black; " src="http://www.youtube.com/embed/bKZbvluHcNo?html5=1&enablejsapi=1&autoplay=0&rel=0&showinfo=0&modestbranding=1&controls=1&autohide=0&vq=large" frameborder="0" allowfullscreen onload="
player5=new YT.Player(this ,{events: {'onStateChange':function(e){if(e.data === -1 || e.data === 1){no_ads('
player5')}}}})">
</iframe>
<div style="position: relative; width: 100%; height: 100%; background: black;z-index: -1; border: 1px solid black"></div>
</div>
<br><br><br><br>
<div style="position: relative; width: 419px; height: 380px; background: black; " >
<div style="position: relative; text-align: center; background: white; height: 50px" >
<button style="cursor: pointer" onclick="
player6.loadPlaylist('bKZbvluHcNo,AVgbEkBWuqs')">(re)start</button>
<button style="cursor: pointer" onclick="
player6.playVideo()">play</button>
<button style="cursor: pointer" onclick="
player6.pauseVideo()">pause</button><br>
<button style="cursor: pointer" onclick="
player6.cueVideoById('bKZbvluHcNo');">stop</button>
<button style="cursor: pointer" onclick="
player6.unMute()">sound on</button>
<button style="cursor: pointer" onclick="
player6.mute()">sound off</button>
</div>
<iframe id="
player6" style="position: absolute; width: 100%; height: 100%; border-right: 1px solid black; " src="http://www.youtube.com/embed/bKZbvluHcNo?playlist=AVgbEkBWuqs&html5=1&enablejsapi=1&autoplay=0&rel=0&showinfo=0&modestbranding=1&controls=1&autohide=0&vq=large" frameborder="0" allowfullscreen onload="
player6=new YT.Player(this ,{events: {'onStateChange':function(e){if(e.data === -1 || e.data === 1){no_ads('
player6')}}}})">
</iframe>
<div style="position: relative; width: 100%; height: 100%; background: black;z-index: -1; border: 1px solid black"></div>
</div>
</body>
That's it. Enjoy.