iPhone, YouTube, and swfobject

Published by Grace | Filed under Flash

I was working on troubleshooting a problem with YouTube videos not displaying on a page earlier this week and found out something interesting. Swfobject has pretty much become the industry standard for embedding Flash objects within web pages. For those that aren’t in the know, swfobject is a JavaScript plugin that detects whether a variety of conditions are met so that the user can view the Flash object properly, otherwise the user is served alternate content or asked to upgrade Flash or enable JavaScript. Nowadays, with the iPhone being such a popular platform for internet browsing, Flash objects have become somewhat of a hassle to deal with. Even as a Flash programmer, I have to say that if I can build similar functionality with jQuery and some AJAX, then I probably won’t go down the Flash route just because of the maintenance issues the UI presents down the road. That being said, it’s been quite a few months since I’ve embedded a Flash object or even looked at a Flash project because I can accomplish what I need in jQuery, thus my rediculous lack of intuition coming up here.

Ok, so let’s circle back. Because it’s swfobject’s job to present us with something else if there is no Flash player, iPhone’s Safari browser never actually is presented with the embed tag. For iPhones, if Safari recognizes that the embedded Flash is actually a YouTube video, it replaces the embedded content with a clickable image to the video that will play in iPhone’s YouTube application. So, if the YouTube video on the page was loaded using swfobject, the iPhone browser never gets a chance to scan the embed tag and replace it appropriately.

After a couple of hours Googling the wrong terms, this article finally came up, and I had successfully squashed swfobject’s automated process by doing a little browser sniffing up front. Results end up looking something like this, but take a look at the article for some details on how to check iPhone browsers:

1
2
3
4
5

if (is_iPhone) {
    document.getElementById("flashcontent").innerHTML = '<embed src="http://www.youtube.com/v/' + vid + '&;hl=en&fs=1&rel=0&showinfo=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="350"></embed>';
} else {
    swfobject.embedSWF("http://www.youtube.com/v/" + vid + "&rel=0", "flashcontent", "425", "350", "7.0.0", "\global\scripts\client\expressinstall.swf");
}

Definitely take a moment to check it out and revisit your sites to see if there is anything you might want to do to accommodate iPhone & non-flash smartphone users