Results 1 to 3 of 3

Thread: Controlling the youtube player with javascript

  1. #1
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,395
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default Controlling the youtube player with javascript

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 10-15-2012 at 03:46 AM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    molendijk (10-15-2012)

  4. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,395
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default

    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.

Similar Threads

  1. Loading YouTube videos using the most recent YouTube embed code
    By molendijk in forum Submit a DHTML or CSS code
    Replies: 11
    Last Post: 05-29-2012, 12:04 AM
  2. A player for YouTube, Tubehop, DailyMotion and GoogleVideo.
    By molendijk in forum Submit a DHTML or CSS code
    Replies: 0
    Last Post: 01-31-2010, 11:32 PM
  3. Replies: 0
    Last Post: 11-01-2007, 11:56 PM
  4. Replies: 5
    Last Post: 03-16-2007, 04:24 PM
  5. Replies: 14
    Last Post: 01-31-2007, 10:46 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •