Have you embedded a video into your blog and notice that it broke your validation? Videos from sites such as YouTube, Google Video and Metacafe provides custom codes to allow you to embed their videos into your blog. Here, I would like to provide you with a solution to that problem. This tutorial is possible thanks to C.K. Sample III who has provided a nicely modified code to replace the default codes given by those sites.
This tutorial will guide you to embed a YouTube video into your blog without breaking validation. I have only tested the codes on Youtube and metacafe. While C.K. Sample III has tested it on Google Video as well. It should work for all (i think) video sites that provide their videos in flash format, as long as you follow these guides below. Tell me if it doesn’t work on any sites that you’ve tried!
Step 1: Select the video to embed into your blog. I’ve chosen this video from YouTube.
Step 2: On the right of the video, you’ll find the “Embed” codes shown in the picture below. Copy the codes, and paste it in a word editor.
Embed codes given by YouTube:
<object width=”425″ height=”350″><param name=”movie” value=”http://www.youtube.com/v/wk5dw7JU6D0“></param><param name=”wmode” value=”transparent”></param><embed src=”http://www.youtube.com/v/wk5dw7JU6D0” type=”application/x-shockwave-flash” wmode=”transparent” width=”425″ height=”350″></embed></object>
What you need is the bolded links above which is http://www.youtube.com/v/wk5dw7JU6D0. Copy that down, you’ll need it later.
Step 3: Copy the codes below (provided by C.K. Sample III) and paste it in your blog where you want the video to be displayed.
<object type="application/x-shockwave-flash" data="[INSERT VIDEO URL FROM EMBED CODE PROVIDED HERE]" width="400" height="326">
<param name="movie" value="[INSERT VIDEO URL FROM EMBED CODE PROVIDED HERE]" />
<param name="FlashVars" value="playerMode=embedded" /></object>
Step 4: Replace [INSERT VIDEO URL FROM EMBED CODE PROVIDED HERE] with the bolded codes from Step 2.
Your finished codes should look like this:
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/wk5dw7JU6D0" width="400" height="326">
<param name="movie" value="http://www.youtube.com/v/wk5dw7JU6D0" />
<param name="FlashVars" value="playerMode=embedded" /></object>
There you go. Hope this tutorial helped.
Stumble it!
Share it!
Subscribe to my feed
if using WordPress and blogger, I think there is no problem embeding YouTube videos..
@Aman
I agree there won’t be a problem embedding the video into a WordPress or blogger blog. In fact, they should work on any blogs or web page.
However, for those people who want their website to pass validation and conform to the W3C recommendations and other standards, they’ll need to replace the default codes given by YouTube with the one I mentioned in this post.
You can go to http://validator.w3.org/ to validate your website. Any codings that do not conform with the W3C recommendations and other standards will be displayed as errors.
I’m writing another post on, “Why you should validate your HTML”. It’s not finish yet. Do come back soon for it.
Excellent, thanks for the writeup. This helped me get by the Blogger validator.
@Johnny
Welcome
hello!
i need a little your with this.
i uploaded a video last week to google
i just want to add the embed code to my site to play it all the time
i do not have and idea how to do it in flash mx can you explain me please if i have to put tthe code into the html flash file and where or how-
i can not find this information and i would like to make our site a little bit nicer- thank you!
Hi i want to ask does it apply the same for youku player..