Unfortunately, the <embed> tag found in every youtube video and many others was developed by Netscape and is not xhtml compliant.
I recently ran into this issue with embedding youtube videos on my site that sells HTC skins, and the code would not validate… so here is what I did to fix it.
Rather than pasting the regular code from Youtube which will not validate seen below:
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/RLsteq0ESqk&hl=en_US&fs=1&rel=0&hd=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RLsteq0ESqk&hl=en_US&fs=1&rel=0&hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
I have pasted this:
<object type="application/x-shockwave-flash" width="425" height="350" data="http://www.youtube.com/v/n"><param name="movie" value="http://www.youtube.com/v/n" /></object>
Where n is the ID number of the relevant YouTube video.
If flash is not installed, the video will not display so you will want to add this before the </object>
<a href="http://get.adobe.com/flashplayer/" target="blank"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get flash player to play to this file" width="88" height="31" /></a><br />
That will show an image of flash and link back to adobe to have them install the player.
Here is what my final code looks like. It will now validate correctly.
<object type="application/x-shockwave-flash" width="320" height="265" data="http://www.youtube.com/v/RLsteq0ESqk"><param name="movie" value="http://www.youtube.com/v/RLsteq0ESqk" /><a href="http://get.adobe.com/flashplayer/" target="blank"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get flash player to play to this file" width="88" height="31" /></a><br /></object>
If you would like to check the validation of your own site, head over to http://validator.w3.org/. And if you want to see this in action, visit http://xoskins.com, and check the embed code on the homepage Youtube video.
Guest Post by Jason Martinez
Jason Martinez is the founder of XO Skins , a company that provides invisible scratch protection for your electronic devices (Cell Phones, iPod’s, Digital Camera’s, GPS, etc).
XO Skins launched its web store November 1, 2009. Jason also writes a blog for XO Skins and is looking for new ways and new technology to improve its web presence.
Would you like to be a guest blogger? Send us your idea!
8 Comments
Thank you so much for this…works even with my custom parameters
No problem, glad I could help.
The problem with this method is that then the videos wont plan on an ipad/iphone anymore. Also your site still has other validation errors.
BK: What validator are you using? The only errors I saw were related to youtube embeds.
http://validator.w3.org/
This document was successfully checked as XHTML 1.0 Transitional
Unfortunately the iPad and the iPhone do note support flash. They also can’t display many other sites because of this.
Jason: The normal embed triggers the backdoor youtube app present in iphone OS. So the videos will play ok. One possible workaround is that when flash is not present present a link to the video instead. That way ipad users can at least click through to get the video.
Thanks dude, it works fine. My all pages are validated.
Amazing! You have discovered an awesome Fix to youtube videos Everywhere!
Well Done.
Leave a Reply