Proper way to embed flash content into your site

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="images/banner.swf" width="288" height="128"> <param name="movie" value="images/banner.swf" /> <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 Amy Winehouse cover of 'Valerie' (produced by Mark Ronson) and originally by The Zutons, the snippet will look like this:

<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/1Peul8QOAxM&hl=en"></param> <param name="wmode" value="transparent"></param> <embed src="http://www.youtube.com/v/1Peul8QOAxM&hl=en" 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/1Peul8QOAxM&hl=en" width="425" height="355"> <param name="movie" value="http://www.youtube.com/v/1Peul8QOAxM&hl=en" /> <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.

No Flash plugin installed

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Pingback

[...] 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 » [...]

Pingback

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