Skip to content

View Sidebar

Tip #3: Embedding Standards Based Flash Video – Jojo Esposa Jr.

Actually this is not a web accessibility concern but more of a web standards issue. This is very useful especially to those web

designer/bloggers out there who often embed YouTube videos in their sites. I hope this tip will be useful for us. 🙂

If you put flash videos in your site, I’m 100% sure it will not validate. The main culprit here is the ‹embed› tag. It is not part of the XHTML specification. The ‹embed› element was created by Netscape during those browser wars days as its method of embedding plug ins and players in web pages. It’s not standards compliant.

The solution, “Flash Satay“. Devised by Drew McLellan of A List Apart and Web Standards Project, this workaround eliminates the use of embed element while retaining the object element. The codes are shorter and simpler, removing many unnecessary tags.

Consider this example of YouTube Flash Video of Willie’s Wowowee Scam:

‹object width=”425″ height=”350″›

   ‹param name=”movie” value=”http://www.youtube.com/v/FE8UO019gqM”›‹/param›

   ‹param name=”wmode” value=”transparent”›‹/param›

   ‹embed src=”http://www.youtube.com/v/FE8UO019gqM” type=”application/x-shockwave-flash” wmode=”transparent” width=”425″ height=”350″›‹/embed›

‹/object›

Now simply remove all other tags and put the URL tag like this:

‹object type=”application/x-shockwave-flash”

data=”http://www.youtube.com/v/FE8UO019gqM” width=”425″ height=”350″›

‹param name=”movie” value=”http://www.youtube.com/v/FE8UO019gqM” /›

‹/object›

You now have a shorter yet standards-compliant flash video. This works both in IE and Firefox. Try it. 🙂

You can also add these codes before the ‹/object› to show warning for those non-flash enabled browsers. Just make sure you create the noflash.gif image as a replacement like this.

‹img src=”noflash.gif” width=”425″ height=”350″ alt=”This appears if no flash player is installed.” /›

The next best thing that you can do is to put closed caption on your flash videos. Now that’s a web accessibility thingie. 🙂

Reference:
  1. Flash Satay Article of Drew Maclellan – http://www.alistapart.com/articles/flashsatay