Getting YouTube code to validate (updated)

When I moved my blog over to WordPress after blogging neatly, perfectly and in control with the most excellent Modx, I began to use many of the gizmo’s and widgets which make my blog abit more Web 2.0.
Usually when designing sites, I don’t use other people’s bits of code or plug-ins, as I am designing purely for the purpose of creating a custom site for a custom purpose for the client. But with WordPress and enjoying the ease of blogging and playing, I ventured into ‘widget world’ and ’embedding objects’ too. So what is my problem with alot of it?

Validation – the YouTube embed code broke my validation…

– my pages no longer validated with the bits of code provided often from many social networking sites for their badges for example. (test validation of pages with the validator at W3.org).

Also, much of the code provided not only doesn’t validate, but renders badly for accessibility and usability too. So I spent quite a while when building my blog adding little bits on here and there…then tweaking them or removing them after losing the will to live for the sake of a trendy little blob on my site to promote my use / profile of another site.
But the one that really surprised me was the embedding of YouTube videos. I did this recently for Oli’s pop star posting last week, and yup – it wrecked my XHTML validation.

We’re all trying to make the web more friendly and accessible by using our sites to provide another form or strand of communication to reach different audiences, and use provided code in good faith….to find that it breaks the validation.

Just about all the bloggers I know, plus quite a few non-profits use YouTube embedded code on their blogs and sites to show media clips and other similar applications. Don’t get me wrong, the idea and concept about it all of this modern way we’re utilising use the web is great, it can bring a site alive, help convey a message, or provide some light entertainment to make us smile.

We’re all trying to make the web more friendly and accessible by using our sites to provide another form or strand of communication to reach different audiences, and use provided code in good faith….to find that it either breaks the validation or in some cases with other badges takes the accessibility and usability of a site at the lowest level or just below what is classed as minimum standards.
So, after abit of delving into this and with a bit of a play – I’ve made the code validate. This should potentially work with Google video embedding too (don’t get me started on Google – when using their Custom Search Engine code to use for the search form – it needs quite a re-write just to get it through accessibility testing!).

If you, like me want your pages to validate – you’ll need to tweak your code when embedding YouTube videos. This code worked for me…

<object type="application/x-shockwave-flash" data="[INSERT THE VIDEO URL ADDRESS FROM THE EMBED CODE PROVIDED HERE]" width="425" height="350"><param name="movie" value="[INSERT THE VIDEO URL ADDRESS FROM THE EMBED CODE PROVIDED HERE]" /><param name="FlashVars" value="playerMode=embedded" /><p>SOME ALTERNATIVE TEXT HERE For ACCESSIBILITY</p></object>

It is a shame though that in a world where (hopefully!) we are now being abit more ‘standards aware’ with what we publish, that some of the most well known suppliers of gadgetry and fun add-ons for the web, can’t seem to produce compliant code for the masses to use on their sites. Just as importantly, it’s not fair either for those that may have difficulty in accessing the data from those sites that they want to view because of the original code not validating properly.

The web would be a far better and usable place for all if the big boys could manage this.

Update 26/7/07 … Since looking into this, I’ve found out alot more. There are some good sites which delve into this further.
Take a look at A List Apart’s article on how to use flash videos in a more usuable way which lists the pro’s and con’s of different ways to do it.
Also for a great visual guide do see ThinkTanks article and great case study comparisons of ways to embed flash players.
Wish I’d searched these solutions out before working it out myself! (I’m obviously using code similar to the Satay method!)