Best Way to Embed a Youtube Video on a Mobile Website

Note: This blog post was posted on July 13, 2011. Youtube embeding may have changed since then, they claim to still be fixing it and in beta.

This suggestion is to provide the best user experience when watching a Youtube video on your mobile website. A lot of times it is done incorrectly and users are redirected to either m.youtube.com or it opens up your phone's native Youtube application, which basically minimizes your browser. This pushes users away from your site and basically requires users to hit the back button to get back to your site.

My suggested way to embed a Youtube video is using the HTML5 player, which is in an iFrame. So why use the iFrame option compared to a link or flash player?

• Supported in most mobile browsers, for the full list click here
• Keeps users at your site when they click play, on an iphone and android opens the video full screen on click.
• Cleaner code and degrades well

Here is the code with the suggested parameters, that I will go through.

<iframe src="http://www.youtube.com/embed/1234567?controls=0&showinfo=0&showsearch=0&modestbranding=1" width="310" height="160">

First of all is to make sure your Youtube video fits on your mobile layout. In the example above the width is 310 but it may need to be configured if you are using a different viewpoint width in your header.

Second is to review the Youtube embeding parameters (http://code.google.com/apis/youtube/player_parameters.html). In this example I removed the bottom grey control bar which is taking up space. It also removes the title of the video from being displayed, the reason to do this is cause if you click on the title it actually takes you to m.youtube.com site to make you reload the video. This code also replaces the larger Youtube icon with a smaller version, which cleans up space and also has the same issue as clicking on the title of the video

Now that you have completed the task of getting the Youtube video to display, it is time to take care of a special case the Blackberry users. If you actually try to watch the video on a Blackberry it will open the Blackberry's native Youtube application, which again takes away from the user experience. So the best way is to make it a link to m.youtube.com in another tab. Here is the code to detect if the user is coming from a Blackberry and replaces it with an image and the link

$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
$pos_blackberry = strrpos($ua, "blackberry");
$pos_webkit = strrpos($ua, "webkit");

if (!($pos_blackberry === false)) {
	if (!($pos_webkit === false)) {          
        		$output = '<a href="http://www.youtube.com/watch?v=1234567"><img src="http://img.youtube.com/vi/1234567/0.jpg" border="0" alt="See video" title="See video" width="310" height="'160">';        
      	}
}

Interesting Test Results (mainly using iPhone):

1. link = Plays video in native app
2. link = Redirects you to m.youtube.com/#/watch?v=1234567, double page load.
3. link = Goes to 404 Page not found. Same with m.youtube
4. link = Opens up m.youtube.com only one page load.
5. Use old embed code = Limited options but plays in iPhones and Androids, does not even show on blackberry and does not degrade.

happy youtubing,
-justin