Force HTML5 youtube video

119
votes

Regarding the Youtube API Blog they are experimenting with their new HTML5 Video Player.

Apparently to play a video in html5, you have to use the iframe embedding code :

<iframe class="youtube-player" type="text/html" width="640" height="385"
  src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>

But if the client has not joined the HTML5 Trial, the player will automatically fall back into the flash player even if the client's browser is HTML5 video capable.

How to force the HTML5 video playback if the browser supports it, even if the users are not yet involved in the HTML5 Trial?

Otherwise how to disable the flash fallback?

EDIT:

It's possible to force HTML player through links to Youtube Video, but I need this kind of feature for embedded videos.

5
htmlvideoyoutube
What if you were to detect HTML5 Capability with js, and implement the youtube api code accordingly. Or I should say, if HTML5 Video not supported, don't implement the youtube api as it would resort to Flash. – David Hobs

5 Answers

181
votes

I've found the solution :

You have to add the html5=1 in the src attribute of the iframe : 

<iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5=1"></iframe>

The video will be displayed as HTML5 if available, or fallback into flash player.

20
votes

Whether or not YouTube videos play in HTML5 format depends on the setting at https://www.youtube.com/html5, per browser. Chrome prefers HTML5 playback automatically, but even the latest Firefox and Internet Explorer still use Flash if it is installed on the machine.

The parameter html5=1 does not do anything (anymore) now. (Note it is not even listed at https://developers.google.com/youtube/player_parameters.)

4
votes

I tried using the iframe embed code and the HTML5 player appeared, however, for some reason the iframe was completely breaking my site.

I messed around with the old object embed code and it works perfectly fine. So if you're having problems with the iframe here's the code i used:

<object width="640" height="360">
<param name="movie" value="http://www.youtube.com/embed/VIDEO_ID?html5=1&amp;rel=0&amp;hl=en_US&amp;version=3"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed width="640" height="360" src="http://www.youtube.com/embed/VIDEO_ID?html5=1&amp;rel=0&amp;hl=en_US&amp;version=3" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>

hope this is useful for someone

2
votes

If you're using the iframe embed api, you can put html5:1 as one of the playerVars arguments, like so:

player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: '<VIDEO ID>',
    playerVars: {
        html5: 1
    },
});

Totally works.

0
votes

Inline tag is used to add another src of document to the current html element.

In your case an video of a youtube and we need to specify the html type(4 or 5) to the browser externally to the link

so add ?html=5 to the end of the link.. :)