Force HTML5 youtube video

HtmlVideoYoutube

Html Problem Overview


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.

Html Solutions


Solution 1 - Html

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.

Solution 2 - Html

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.)

Solution 3 - Html

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

Solution 4 - Html

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.

Solution 5 - Html

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.. :)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionKamiView Question on Stackoverflow
Solution 1 - HtmlKamiView Answer on Stackoverflow
Solution 2 - HtmlVacilandoView Answer on Stackoverflow
Solution 3 - HtmlalejandroView Answer on Stackoverflow
Solution 4 - HtmlsamsonView Answer on Stackoverflow
Solution 5 - HtmlashwinrishipjView Answer on Stackoverflow