Proper way to embed flash content into your site

Submitted by admin on Tue, 08/04/2008 - 20:51

One of the things i dislike about YouTube is the Flash embed snippet they offer. It's just not valid xHTML and brings many errors. Actually, two things i dislike, the other is poor video quality compare to other sites like Revver or blip.tv but that's not what i want to discuss about.

Anyway, the proper way to embed Flash content is by simply using:

<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/igWvNUl4S6M&hl=en&fs=1&" width="288" height="128">
<param name="movie" value="http://www.youtube.com/v/igWvNUl4S6M&hl=en&fs=1&" />
<img src="banner.gif" width="288" height="128" alt="banner" />
</object>

So if you had a YouTube video you want to embed. For example a video of Kraftwerk - The Model (cover version by Balanescu Quartet), the snippet will look like this:


<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/igWvNUl4S6M&hl=en&fs=1&"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/igWvNUl4S6M&hl=en&fs=1&" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed ></object>

We would rewrite this as valid Flash XHTML so it should look like this:


<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/igWvNUl4S6M&hl=en&fs=1&" width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/igWvNUl4S6M&hl=en&fs=1&" />
<img src="noflash.gif" width="425" height="355" alt="No Flash plugin installed" />
</object>

It degrades to GIF image if Flash plugin is not available and HTML + CSS stays valid.

This code has been tested and works in Internet Explorer 5.01, 5.5, 6.0, Mozilla Firefox (former Mozilla Firebird), Opera and Konqueror and is fully XHTML Strict valid. No <embed> tags needed.

Note: Don't forget to escape ampersand (ie, &), if there are any in the URL.

So there you have it, enjoy this excellent music video and thanks to Ambience.sk.

Comments

Pingback

Permalink Submitted by Media Districts... (not verified) on Tue, 08/04/2008 - 21:50

[...] duvien.com placed an interesting blog post on Proper way to embed flash content into your siteHere’s a brief overview [...]

Pingback

Permalink Submitted by Youtube &ra... (not verified) on Tue, 08/04/2008 - 22:51

[...] duvien.com wrote an interesting post today on Proper way to embed flash content into your siteHere’s a quick excerpt One of the things i dislike about YouTube is the Flash embed snippet they offer. It’s just not valid xHTML and brings many errors. Actually, two things i dislike, the other is poor video quality compare to other sites like Revver or blip.tv but that’s not what i want to discuss about. Anyway, the proper way to embed Flash content is by simply using: read more » [...]