How to properly embed Macromedia Flash objects

If any of you has been visiting this blog through Mozilla with the Tidy-based HTML validator extension, you may notice that the page now validates perfectly with no error and no warning at all, instead of having 1 warning like before. The problem had to do with the Flash movie from YouTube. The HTML code that YouTube supplied contained the <embed /> tag, which is not recognised by the W3C's HTML and XHTML specifications. Being a standard-compliant freak, I have been asking around for weeks about how to get rid of the warning; and then, just an hour ago, I read the HTML 4.01 specifications again and found >this<.

Before - the original code from YouTube:

<object width="425" height="350">
    <param name="movie"
        value="https://www.youtube.com/v/63bWYFGBTuE" />
    <embed src="https://www.youtube.com/v/63bWYFGBTuE"
        type="application/x-shockwave-flash"
        width="425" height="350" />
</object>

And after - the new code I figured out:

<object width="425" height="350"
    data="https://www.youtube.com/v/63bWYFGBTuE"
    type="application/x-shockwave-flash">
    Yellow Fever
</object>

Notice, however, that Microsoft Internet Explorer does not understand the second, correct version. It is a long-known fact that Internet Explorer's HTML rendering engine is broken in many different places, with respect to the W3C specifications. Therefore, JavaScript needs to be used to determine which version to use:

<script type="text/javascript">
IEString = '<object width="425" height="350">'+
  '<param name="movie" '+
  'value="https://www.youtube.com/v/63bWYFGBTuE" />'+
  '<embed src="https://www.youtube.com/v/63bWYFGBTuE" '+
  'type="application/x-shockwave-flash" '+
  'width="425" height="350" />'+
'</object>';
MozString = '<object width="425" height="350" '+
  'data="https://www.youtube.com/v/63bWYFGBTuE" '+
  'type="application/x-shockwave-flash">'+
  'Yellow Fever'+
'</object>';

// The "browser" string is assigned by a nice
// browser detection script from quirksmode.org
if(browser == "Internet Explorer")
  document.write(IEString);
else
  document.write(MozString);
</script>

I hope this little piece of information helps those of you who want to use Flash on your webpages while being standard-compliant. I admit that the script does not take even other browsers like Opera, Safari, and Konqueror into account. I have not used those browsers long enough to know their behaviours off the back of my head. You are welcome to leave comments to help me improve the script. Notice also that, due to the default text processing options of WordPress, just pasting the script section inside a post usually does not work. You need to employ one of the solutions described >here<.

Related Posts:

Comments