SWFObject 2.0 and multiple videos on your blog front page

So with as easy as posting videos is from Windows Live Writer, a problem that bugs me is their use of the <embed> tag and its non-compliance to web standards. Of course leave the tag out and many browsers won’t work properly.

Through a couple of pieces of information from multiple places I finally figured it out.

First step is to download swfobject 2.0.

Next is to of course include the swfobject code into your page. Do this by including the following into the <head> of your blog (likely located in header.php or something similar):
<script type="text/javascript" src="swfobject.js"/>

Finally include the following code block where you want your video placed in the post:

<div align="center" id="mov2009081101">
    You need the Flash Player to view this video.
</div>
<script type="text/javascript">
    /*<!--*/
    var flashvars = {};
            var params = {};
            var attributes = {};
            attributes.id = "swf2009081101";
            swfobject.embedSWF("http://www.youtube.com/v/2Fb-p5TkAE4&amp;hl=en", "mov2009081101", "425", "355", "9.0.0", false, flashvars, params, attributes);
    /*-->*/
</script>   
</div>

You will need to replace “mov2009081101” and “swf2009081101” in all places with two different strings unique to the movie. The problem is if you have multiple movies on a page, whether the front page, a category listing, or whatever, duplicate ids will conflict. The ones I included above were simply the date of the blog and a 2 digit enumeration. With all of this done, flash videos should now be viewable for everyone AND your page should pass W3C validation.

Share

Leave a Reply

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