Controlling the youtube player with javascript

**molendijk** · 10-14-2012, 11:09 PM

Can anyone tell me why the following works in Firefox and Chrome (even locally) but not in IE and Opera:

Code:

<!doctype html>
<html >

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script>
var player;
function onYouTubePlayerAPIReady() {player = new YT.Player('player');}
</script>

</head>

<body>
<iframe id="player" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/CkPv2jP9KeY?rel=0&amp;enablejsapi=1"></iframe><br>

<a href="javascript: void(0)" onclick="player.playVideo(); return false">play</a><br>
<a href="javascript: void(0)" onclick="player.pauseVideo(); return false">pause</a><br>
<a href="javascript: void(0)" onclick="player.stopVideo(); return false">stop</a>
</body>

</html>

Thanks,
Arie Molendijk.

**jscheuer1** · 10-15-2012, 12:54 AM

Well I'm sure you know that the API docs state that it needs to be live. Of course that doesn't mean for all browsers under all circumstances though. However, it does mean that live is the only valid cross browser test environment.

So I loaded it up on my wamp server - just like live in 99% of cases, for testing purposes.

Worked fine in Chrome and Firefox and IE 9. In IE 9 in IE 8 mode it balked. At first, when I hit play it said "Video player is too small." That was displayed white on black right in the viewing area. After that, if I hit stop and play again, it just didn't work, no error message, just displayed the loading GIF image.

Anyways, I've done some professional work with that API (the YT iframe javascript API) and though it never came up, I recall reading in the docs somewhere about the size of the video being an issue in at least some cases. So I took it to heart. Increased to 800 X 440:

Code:

<iframe id="player" style="position: relative; height: 440px; width: 800px" src="http://www.youtube.com/embed/CkPv2jP9KeY?rel=0&amp;enablejsapi=1"></iframe>

And then it worked fine in IE 9 IE 8 mode. I double checked on my VM in a real IE 8, still good.

So, that should do it. Test live with a larger iframe. But still no good in Opera. Not sure what the story is there.

At the same time, it's my understanding that the preferred method (given the current overall approach of the code you're using there) would be:

Code:

function onYouTubePlayerAPIReady() {player = new YT.Player(document.getElementById('player'));}

Which also works. I don't see any difference with this demo. But it's possible that, given a more complex page, in IE that browser confusion over the implied document.all could arise if getElementById isn't used.

Also the javascript YT API for iframe might not work in IE less than 8 because I also recall seeing something like that in the docs when I was working with it. In fact, in those cases (since I was writing out the tag(s) with javascript anyway) I made sure to use an object and the object/embed YT javascript API instead of the iframe one for IE 7 and less.

From: https://developers.google.com/youtub...e#Requirements

Requirements

The end user must be using a browser that supports the HTML5 postMessage feature. Most modern browsers support postMessage, though Internet Explorer 7 does not support it.

Edit: OK, here's the latest I found. The onYouTubePlayerAPIReady has been deprecated, it's now onYouTubeIframeAPIReady. But that doesn't make any difference the browsers that work with the deprecated function also work with the updated one and Opera doesn't work with either, but might as well use onYouTubeIframeAPIReady. The problem with Opera as I say is that it doesn't fire either of these functions. It does appear to be fine running off of the page load function (window.onload in its various forms). So this works in all the browsers I tested (Firefox, Chrome, IE 8 and up, Opera):

Code:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script>
var player;
function onYouTubeIframeAPIReady() {player = new YT.Player('player');}
if(window.opera){
	addEventListener('load', onYouTubeIframeAPIReady, false);
}
</script>
</head>
<body>
<iframe id="player" style="position: relative; height: 440px; width: 800px" src="http://www.youtube.com/embed/CkPv2jP9KeY?rel=0&amp;enablejsapi=1"></iframe><br>
<a href="javascript: void(0)" onclick="player.playVideo(); return false">play</a><br>
<a href="javascript: void(0)" onclick="player.pauseVideo(); return false">pause</a><br>
<a href="javascript: void(0)" onclick="player.stopVideo(); return false">stop</a>
</body>
</html>

To be on the safe side, you might want to do a poll in Opera testing for YT (should be 'object') and when found, for YT.Player (should be 'function') and when found then execute player = new YT.Player('player'); But in my experience, onload was fine. In fact, looking back over my code, that's all I used and it performed fine for all browsers. Still, something to consider.

**molendijk** · 10-15-2012, 09:24 AM

Thanks very much John. That's fantastic. Works even locally in all browsers but IE.
Brw, the size of the iframe must be 220x220 or higher. I checked your code using this size: it works.
Thanks again,
Arie.