matt.toigo

GET EXCITED AND MAKE THINGS

Linking to YouTube on Mobile Websites

April 25th, 2011 dev

Launching a native video player via the HTML5 video element if possible is the slickest way to handle video on mobile websites. An alternative that requires less development and QA time is simply uploading the video to YouTube and then linking to it. This approach has the advantage of letting YouTube deal with optimization, CDN (content delivery network) caching, and also having the video play on BlackBerry and Windows Phone 7 which can be problematic (also not likely worth the effort) to implement yourself.

A standard implementation of this technique would be a thumbnail image of your video hosted on your website (possibly with a play arrow in the center of the image to let someone know that it's a video). This image is then wrapped in a link with an href attribute for the URL of your video on YouTube. You can either link to a youtube.com URL or a m.youtube.com URL which creates a very different experience depending on the mobile OS and the presence of a natively installed YouTube application..

What Does Linking to Mobile YouTube Look Like

When a user clicks a link to an m.youtube.com URL they will see a brief message reading "Redirecting to page. Please wait." and then they'll arrive at a mobile version of a YouTube page containing the video. They can click a thumbnail of the video to play it and exit by pressing the back button. They can then press the back button again to get back to the original site where the video was originally linked from. They may need to press the back button multiple times to pause the video, and then potentially two more times to get back to the original URL where they clicked the link from.

Recommendation

Anytime you link to YouTube from a mobile website, you should link to youtube.com except for iOS devices which should link to m.youtube.com. This is dependent on the following two assumptions:

Why Wouldn't You Want the Native YouTube Player on iOS

In iOS when the native YouTube application is launched there is no way for a user to smoothly get back to your website after they finish viewing a video. They have to navigate back to the home screen and then open their browser again. This makes for a somewhat awkward kind of dead end experience. Linking iOS devices to m.youtube.com avoids firing the native YouTube player and allows them to just press back to return to the original website.

What About the Native YouTube Player on Other Devices

The native YouTube player on iOS is the only one where a user hits a dead end. The native YouTube player on most other mobile devices (Android and Blackberry) allows a user to press back and return to the web page they were originally on. On Windows Phone 7, neither youtube.com or m.youtube.com links fire the native YouTube player. On Palm youtube.com links will fire the native player and you can back out of it to the web page you were on, but the user experience is slightly different due to how Palm displays multiple running applications.

Resources