How to make embedded Flash code from Vimeo validate in XHTML
I learned something today: the <embed> tag is not valid XHTML.
It's very important to have valid XHTML. It not only has an impact on search engine ranking, but also on accessibility. That's not really what this post is about, so I'll get off my soapbox now. Anyway...
I hadn't ran my site through the W3C Validator in some time, at least not since I created my site. I decided to see if anything had changed in the 100 code revisions I've made since I first started, and unfortunately, I got a little surprise. This is especially embarrassing after my last post about McCain's site not being accessible.
The validator was really choking on my embedded Vimeo videos, particularly with the <embed> tag. It was not, however, having a problem with the <object> tag. I'm still new to Flash, but I noticed that a lot of the data inside the attributes of the <embed> was the same as the data in the attributes of the <object>. This seemed redundant, so I decided to investigate.
Apparently, the peeps over at "A List Apart" had noticed this as well. It turns out that you don't really need the <embed> tag. It was just something that was created by Netscape back in the day (like, 1990's) to add media plug-ins to a page. The majority of modern browsers support the <object> tag, so it's really all that's necessary. I haven't checked in Internet Explorer yet, but being that this is my personal blog, that's something that can wait (maybe forever).
For you coders out there, here's how I modified the normal Vimeo code to make it validate. Feel free to steal this, no credit required:
<object type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=1734703&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=879dff&fullscreen=1" width="438" height="330">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=1734703&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=879dff&fullscreen=1" />
</object>
The attributes in the <object> and <param> tags are almost analogous to the attributes in the <embed> tag, so I won't explain how to convert the default Vimeo code. However, if you have questions, feel free to ask!
Hope this helps someone. :D