We’re all familiar with YouTube. In fact, the majority of regular web users have embedded a YouTube video somewhere throughout their time online. Traditionally, YouTube offered a Flash-based video player to embed those videos on various web pages. That’s never been a problem; most desktop based browsers have a plugin for Adobe’s Flash Player, allowing embedded videos to work seamlessly.
As always, things progress, especially when it comes to technology. Watching video isn’t quite what it used to be, especially when it comes down to mobile web browsers. In fact, most of them don’t support Flash videos, however more modern versions understand embedded video using the HTML5 <video> element.
Embedding your Videos in an IFRAME
If your site visitors are reading your content on desktop and mobile browsers, your best bet would be to embed the Flash and HTML5 code to ensure your YouTube video will be playable in your pages. This will allow mobile users to view the video in HTML5 while the video will load in the traditional Flash video player for desktop users.
Not to worry, this is an easy task – YouTube’s new IFRAME based embed code easily distinguishes between types of users, switching between Flash and HTML5 players when necessary. The IFRAME auto-detects the user’s browser OS and will choose either the Flash or HTML5 based player depending on their environment, ensuring that your users will be able to watch your videos every visit.
<iframe src=”http://www.youtube.com/embed/VIDEO_ID” mce_src=”http://www.youtube.com/embed/VIDEO_ID” width=”320″ height=”190″>
Working with the embed code is easy; you simply take the video ID and paste it into the bolded area in the example above. If you can’t find the video ID, simply grab the source from YouTube’s Flash embed code and paste the ID in the necessary area.
All YouTube videos presently support IFRAME based embedding, however you’re still stuck embedding the code manually. YouTube is currently previewing the feature to developers, however once the preview period is over, YouTube will make the IFRAME style the default for video embedding, offering the best of both worlds.
Let us know what you think! Will you be using this embed code in your onsite content from now on?