Trying to embed a YouTube video using the HTML5 video element doesn't produce the desired result. The point is that the URL provided by YouTube to embed a video works only with the iframe element. Why so? Because you're actually fetching a Flash video on a page, not the actual file. Since browsers don't support Flash videos when included in an HTML5 video element, everything fails silently. This is due to the fact that browsers accept only a few video formats in HTML5, for example the Theora format or MP4 files. Flash videos are not included in their list. Another important thing to keep in mind is that the feature detection performed by YouTube in order to check whether your browser supports HTML5 videos seems to work only on YouTube and not remotely.
So this will work fine:
<iframe title="YouTube video player" width="440" height="290" src="path/to/video/embed" frameborder="0" allowfullscreen></iframe>
Instead, the following code will fail:
<video src="http://www.youtube.com/embed/SJtchsFiQUo" width="440" height="290" controls autoplay></video>
The reasons behind this failure are the following:
- HTML5 videos are different from iframes. Browsers expect to receive always a specific content type, whereas with iframes they're able to interpret the content
received. - Since there's no content type sniffing on the page that embeds your HTML5 video, the format returned will be always a Flash format. Browsers don't handle this type of content in HTML5 videos.