Tutorial: How to embed flash video in your blog without breaking validation

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 By YouTube

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.


17 thoughts on “Tutorial: How to embed flash video in your blog without breaking validation

  1. Pingback: TenthOfMarch.com » Blog Archive » Sucker For Perfection

  2. Pingback: Sample the Web — Someone wrote up a step by step tutorial…

  3. TenthOfMarch says:

    @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.

  4. abel says:

    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!

  5. Pingback: Sunny16 » Blog Archive » Can’t we all just get along?

  6. Sam CHong says:

    There is this website that I had try very hard to embed the video to my blog which is blogspot but it seem like the way you teach can’t work either. Can you help me out and teach me how to embed a video from that website.

    http://v.youku.com/v_show/id_XMjk0MDM0NjQ=.html

    I hope you understand chinese.
    You will know what i mean when you access the website.
    Thanks Anyway. Hope you can help me.

  7. dmo says:

    Thank you for this tip!
    I’ve tested it in FF 3.5, IE 8, Chrome 2, Opera 9.62. Works!
    Greetings from Hamburg, Germany

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>