Making Embedded Videos Web Standards Compliant

Digg StumbleUpon Delicious Google Buzz

Ok, so you’ve spent hours tweaking your web code to make it web standards compliant and finally everything seems to be working fine, it’s almost ready to go.. Then unsuspectingly you add an embedded video from YouTube or wherever and whoa, somethings gone horribly wrong. Multiple violations are staring you in the face, what on earth are you going to do now?

Have no fear, it’s not as bad as it seems, actually, the solution’s rather simple..

There is some basic information you will need to take from the embedded code, but other than that the resulting code will be exactly the same from video to video.

Firstly you need the height and width as the dimensions may differ depending on which site you are taking the video from. Feel free to change the height and width to whatever you wish so long as you keep the dimensions the same. You don’t want to end up with a distorted image now do you…

Secondly you need the video location, note that this will not be the same as in the URL bar on the page where you got the video. It’s in the embedded video information and will look something like this “http://www.youtube.com/v/qxbuysNGLOM&hl=en&fs=1″. To test if you’ve garnered the right info open the new URL into a new window, your chosen video should fill up the whole browser window and be viewable. Click for example

All you need to do now is fill that information into the right spaces. Here is the new code:

<object type=”application/x-shockwave-flash” width=”insert width here” height=”insert height here” data=”URL of your video here“><param name=”movie” value=”URL of your video here” /> </object>

This will give you fully compliant XHTML code with the added benefit of slimming down your code. There is another option using IFRAMES detailed here. It probably takes a bit too much time to implement if you are going to be adding alot of videos but it is still another option. Personally I like that you can use a chosen graphical piece instead of having the player viewable from the word go. You decide.