Tuesday 29 Jul 2008

The good HTML code to insert Flash

HTMLI 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! :-p

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.


cafĂ© Did this article help you? 
Buy me a coffee!

6 answers at “The good HTML code to insert Flash”

  1. Backlink from HTML compliant Flash in TinyMCE and Wordpress - Azure Dev
  2. 1
    Steve (yeastevo.com) said:

    Thanks for the code. Great site, Solid Info...

  3. 2
    David (azure-dev.kizone.net) said:

    Oh thank you. :-)

  4. 3
    baccarat online (kiao.net) said:

    Really i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us.i found this informative and interesting blog so i think so its very useful and knowledge able.I would like to thank you for the efforts you have made in writing this article.

  5. 4
    ZK@Web Marketing Blog (sextoy.xl.cx) said:

    Thanks for this type of contest . Its really a fantastic website template. I was searching this type of tips and tricks for learn more about this . Thanks for your site.I have collect more information from this site. Thanks for this site to help us. We have a boiler installation company in UK. If anybody wants any help for boiler installation please visit our site.

  6. 5
    Brendan (oduox.com) said:

    I have always stayed away from flash because it looks complicated but my boss is wanting a website with flash so this has been very helpful for me.

Leave a comment (all comments are moderated, don't waste time with spam)

Azure Dev