Pixels from the Edge

Launching a site recently that uses Youtube embedded videos, I found the videos didn’t show in the Safari browser on my newly purchased iPhone. This was a shame because the rest of the site worked perfectly (well almost but I’ll get to that in another post), it was like a lil’ cute mini version of the site!

Being an iPhone n00b I didn’t think much of it, I knew it was possible as I’d seen it working on other sites, but when I began to research my problem I became painfully aware that there is very little info on this issue out there. (That statement is not entirely true as I was being rushed, as always in advertising, to the finish line and not being allowed the time to think about my problem, in other words I was asking Google the wrong question).

But really it wasn’t easy to find out how to embed Youtube videos into your sites on the iPhone. Multiple searches using different terms wouldn’t provide me with the information I needed to understand what the HTML needs to look like to get the Youtube video to show up in a website. Eventually, after a couple of useful links from a buddy, I found out that the Safari browser on the iPhone automatically generates the necessary Youtube embed code, it’s as simple as that. When Safari sees the Flash embed code pointing to the Youtube player it converts it, so instead of the Flash player you will get the video placeholder image with the play button, which when clicked will take you to the iPhone Youtube player (which when you hit ‘Done’ takes you straight back to the site). It will look something like this:

So it automatically gets converted…So why the hell wasn’t it working on my beautiful new site??? Doh, I was using SWFObject :p Now as far as I am aware SWFObject has become somewhat of an industry standard (though lately I had seen some flaws with it and questioned its usefulness), at least within my agency we’ve adopted it as a standard. What does SWFObject do exactly? It checks to see if your browser has the Flash plugin installed and if it does it replaces the target object with the Flash embed code, and if not then it does nothing. This allows the target object to contain alternative content when Flash isn’t available, usually something simple such as ‘This site requires Flash’, along with a link to the Adobe plugin. (SWFObject is also good for controlling the Flash version, so the user may have the Flash plugin but not the right version – the script definitely has its uses, but also its flaws.)

So I now understood what the problem actually was. So this time I was able to ask Google the right question, and it was able to give me the right answer – http://code.google.com/p/swfobject/wiki/iphone_mp4. The browser couldn’t convert the Youtube embed code because the SWFObject wasn’t ever allowing it to exist. If you ask me that’s another flaw with SWFObject, it should have been updated by now to manage itself correctly on the iPhone – 1. Check to see if it’s the iPhone Safari browser, and if so then 2. Check to see if it’s pointing to the Youtube player. Maybe writing that code will be my next task.

From there on it was easy sailing. I didn’t add to the SWFObject code itself as I wanted to maintain the integrity of that file, instead I wrote a wrapper within the target object. (Still rushed I made the mistake of doing the browser-detect back-end in PHP, which is great if you aren’t sat behind a 4 hour Akamai cache!!)

So the simple javascript code to check for the iPhone is:

<script>
  var agent=navigator.userAgent.toLowerCase();
  var is_iPhone = (agent.indexOf('iphone')!=-1);
</script>

This gives you the Boolean is_iPhone which you can then use set your SWFObject target object default HTML like:

<div id="youtubeContent">
  <script>
    if (is_iPhone){
      document.write('<embed src="http://www.youtube.com/v/0uSnyL-RfHw&hl=en&fs=1&rel=0&showinfo=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="562" height="341"></embed>');
    }else{
      document.write('You must have the Flash plugin to see this content');
    }
  </script>
</div>

And finally call the SWFObject embed method:

<script>
  swfobject.embedSWF("http://www.youtube.com/v/JHQ9xNyBC0w&hl=en&fs=1", "youtubeContent", "562", "341", "8");
</script>

Not the most graceful method of doing this I’m sure, but within the time we had it serves us well.

And finally you can check the Youtube videos working within your iPhone Safari here www.thefordstory.com.