I decided to spend some time fixing up Seansense this weekend. I’ve you’re into geeky WordPress website stuff like me, read on! If not, check out one of those other posts.

In addition to fixing broken links and general maintenance, I also thought it would be a good idea to make Seansense 100% iPhone and iPad compatible. Previously the site was a bit of a mess when viewed on an iPhone, with broken Flash video all over the place and formatting issues everywhere. I fixed all this by playing with CSS style sheets and HTML5 video. Keep reading after the break to learn more.

Fixed my CSS Style Sheet
Some parts of the CSS style sheet for my WordPress theme messed the site up on the iPhone, with overlapping text, odd placement of images, etc. To fix this I used the excellent application CSSEdit, which makes editing CSS super easy. It provides familiar formatting tools for generating code and a real-time preview of changes (without making them live on the website). Very cool.

No More Vimeo
A couple years back, Vimeo was way ahead of the curve. They were the first popular website to offer free HD movie uploads and playback online via Flash. Fast-forward to 2010, and Vimeo has lost the HD crown to YouTube, which now supports Full 1080p HD. There are two other major problems with Vimeo, The first is that Vimeo has very limited iPhone support. Videos uploaded by non-paying Vimeo members are not iPhone compatible at all, and the iPhone version of their website just loads up a random list of videos without any option to search or sort. The second is that Vimeo always had the annoying limitation of not allowing embedded videos to play back in HD. YouTube solves both of these problems with full support of the iPhone and iPad and the ability to embed HD videos wherever you want, all for free. I’ve now moved most of my videos over to YouTube.

HTML5 Video
For various reasons, I’d rather host certain videos right here on Seansense instead of YouTube. Since I’d like the site to be iPhone/iPad compatible, Flash is out. The old ways of Quicktime plugins and the like are no good as well. That leads us to HTML5, which is the up-and-coming new web standard that some people would like to see eliminate Flash altogether.

The HTML5 standard should eventually simplify adding video to websites; instead of having a big long string of garbage and a remotely hosted player for embedding Flash video, all you will need is the simple <video> tag. Unfortunately it’s not exactly that easy just yet. Safari and Firefox implement HTML5 video differently, and Internet Explorer doesn’t support it at all (for now). There are a few WordPress plugins that are supposed to help with HTML5 video and different browsers, but they don’t do what I want them to.

I eventually constructed my own bit of HTML5 code that should work with any browser. It includes versions of a video file for Safari, Mobile Safari, Firefox, and browsers that use still use Flash, like Internet Explorer. Here’s an example of what the code looks like:

<video width=”500″ height=”281″ controls>
<source src=”http://seansense.net/videos/360p.mp4″ type=”video/mp4″></source>
<source src=”http://seansense.net/videos/270p.mp4″ type=”video/mp4″></source>
<source src=”http://seansense.net/videos/360p.ogg” type=”video/ogg”></source>
<embed src=”http://vimeo.com/moogaloop.swf?clip_id=8089780&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0
&color=00ADEF&fullscreen=1″ type=”application/x-shockwave-flash” width=”500″ height=”281″ allowscriptaccess=”always” allowfullscreen=”true”/></embed>
</video>

UPDATE 5/2/10: This code doesn’t want to play nice with RSS, so I recommend leaving it out of your feed.

The first line with the <video> tag is pretty self-explanatory. The next few lines specify the different source files. The 360p (640×360 pixels) MP4 file is for Safari, the 270p (480×270 pixels) MP4 file is for the iPhone, and the 360p OGG file is for Firefox. (MP4 files were created using MPEG Streamclip and the OGG file was created using Miro Video Converter.) The big long <embed> string at the end is to fall back to a Flash video hosted by Vimeo should all of the HTML5 magic fail.

Anyway, hopefully someone else out there finds this helpful. If you’ve learned something here today, or if there’s a topic you’d like me to expand on, please let me know! Thanks.