Always Play YouTube Videos in HD: Doesn't work on IE

Question

I have a piece of Javascript that can successfully make a Embedded YouTube video always play in HD(if that video was uploaded in HD aswell).

My Problem: When I run the code in Internet Explorer it wont play the video in HD720 it only plays it in 420(Large=420px). When I run this exact code in Chrome, Firefox and Safari they all play the video in HD720.

Do you know how I can make IE always play my Embedded Youtube videos in HD720?

My Code: See the note below why 'hd720' doesn't work:

<script type="text/javascript" src="https://www.youtube.com/player_api"></script>
<script>
    function onPlayerReady(event) {
            event.target.setPlaybackQuality('highres'); 
            // NOTE: MAKING the above value 'hd720' makes NONE of the browsers
            // play the video in HD720, test it for yourself to see.
            // So thats NOT a solution.
    }

  function loadYouTubeVideo(uid) {
        setTimeout( function() {
                    var id         = uid;
                    var instPlayer = new YT.Player(id, {
                        height: '480',
                        width: '853',
                        enablejsapi: 1,
                        suggestedQuality: 'highres',
                        videoId: uid,
                        events: {
                                'onReady': onPlayerReady 
                        }
                    });
            }, 500);
    }
</script>

Then you embed a Youtube video in your page like so(Note *VIDEO_ID* is your youtube video's unique ID):

<div id="VIDEO_ID"></div>
<script>
    loadYouTubeVideo("VIDEO_ID");
</script>

This question may help resolve getting the 'hd720' parameter to work ... stackoverflow.com/questions/8802498/…. Another thought I had -- are you using the iframe API? If so, it automatically chooses an HTML5 player or Flash player based on conditions, and IE 8 and below would be limited to flash only, which may effect what video quality youtube will have to send ... but that might be a red herring on my part. — jlmcdonald

Tim Wintle Tim Wintle · Accepted Answer · 2012-11-21T07:18:59

Playing a 720p (720 px high) video in a 480px video player won't improve the video quality seen, as the extra pixels can't be displayed on the device. In fact, the resizing will have to be done in a more performance-focused manner than it would be during transcoding on YouTube's servers, and you can end up with worse quality playback than allowing the standard resolution to show.

By default, the YouTube Player will choose the largest resolution which fits inside the player (by height), after accounting for the any playback controls. i.e. for a player which is 480 pixels high, the highest quality which will fit is the 420p version.

I have not explicitly tested the setPlaybackQuality method across the different players and codecs to see if it has different behaviour to the initial video load, but I don't believe the aim is to allow developers to force a higher resolution than can actually be displayed.

Always Play YouTube Videos in HD: Doesn't work on IE

1 Answers