The good HTML code to insert Flash

I must admit we are not helped, everywhere we can share Flash animations or videos, the code they give is wrong. Except a few passioned developpers, most people copy-paste the given code even without knowing the <embed> element does not exist in HTML!

Moreover, the correct code is simpler and shorter.

Here's for example the code given by Dailymotion:

<div><object width="420" height="357"><param name="movie" value="http://www.dailymotion.com/swf/xqhfz&related=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.dailymotion.com/swf/xqhfz&related=1" type="application/x-shockwave-flash" width="420" height="357" allowFullScreen="true" allowScriptAccess="always"></embed></object></div>

I remove the ending links to keep only the video.

Here's the same video with the correct HTML code:

<div><object type="application/x-shockwave-flash" data="http://www.dailymotion.com/swf/xqhfz&related=1" width="420" height="357"><param name="movie" value="http://www.dailymotion.com/swf/xqhfz&related=1" /><param name="allowFullScreen" value="true" /></object></div>

Notice 1: the line <param name="movie" ...> where we repeat the address is for IE which can't find it at the right place.

Notice 2: we don't care of the <param> to access script. If you don't know the use of it, you probably don't need it.

Notice 3: we can center the video by writing instead the initial <div>: <div style="text-align:center">. And this <div> can be replaced by a banal <p>.

~

In short:

1. I copy-paste the part type="application/x-shockwave-flash" src="adresse" from <embed> to <object> and I replace src by data
2. I delete all the <embed> element
3. I modify the ...></param> in ... />

~

The good code to insert a Flash must be this, to keep preciously:

<object type="application/x-shockwave-flash" data="ADDRESS" width="WIDTH" height="HEIGHT"><param name="movie" value="ADDRESS" /><param name="allowFullScreen" value="true" /></object>

---

We can understand the goal of the video sharing sites (or others) because this code is first addressed to the bloggers, and unfortunately the WYSIWYG editor in WordPress damages this code. Even if we insert the correct code in HTML mode, when we get back to visual mode it ransacks it.

My method consists in doing these 3 steps in HTML mode and submit the post without going in visual mode. Then the code is not modified by the WYSIWYG editor (TinyMCE).

---

Mini FAQ: What is the purpose to have correct code? The incorrect works anyway!

The purpose is to respect HTML rules. Like when we write in englih (even badly like me!), if i write lik dis u understand 2, but it's not nice!

And it's actually works. But how many times the browsers will support this code? Today efforts are made to respect the standards (even IE 8 appears to be 100% W3C compliant), webmasters must be the first to show the good thing to do.

~

PS: There is a solution for valid Flash in TinyMCE and WordPress.

This article was posted the Tuesday 29 July 2008 at 21:28
in the category HTML & CSS with tags: Blog, Browser, Flash, Programming, Video.
You can skip to the end and leave a comment. Pinging is allowed..