How to write valid HTML/XHTML code to include Flash

Published on Thursday, February 1st, 2007

Hopefully, you’re someone who cares about web standards and wants to have valid code for the sake of web browsers’ rendering and for you as a web developer, to more easily spot errors right away. Then, when including Flash content in your web page, the default code output from various tools and web sites out there is invalid (at least when it comes to using them with a strict DOCTYPE, which I’d really recommend you to go with).

So, what should a poor caring web developer do?

Don’t fret my friend, there’s an easy and stable way to write valid HTML/XHTML code to include Flash in your web page. The simple code to do it looks like this:

HTML


<object width="425" height="350" type="application/x-shockwave-flash" data="http://www.youtube.com/v/Z154yhLoS78">
	<param value="http://www.youtube.com/v/Z154yhLoS78" name="movie">
	<p>A movie with a very drunk guy that has gotten arrested. You need Flash to see it.</p>
</object>

XHTML

Only difference is that you will need to quick-close the param tag/-s:

<param value="http://www.youtube.com/v/Z154yhLoS78" name="movie" />

And the result will look this (with the exception that WordPress mangles it a little…):

A movie with a very drunk guy that has gotten arrested. You need Flash to see it.

Posted in Developing, HTML/XHTML | 31 comments

31 comments

  • Morgan Roderick
    February 1st, 2007 at 9:38

    Another way that requires very little more effort, and gives you some very nice browser detection is SWFObject: http://blog.deconcept.com/swfobject/

    Beware though, in some instances it doesn’t play nice with Prototype.js / LowPro … am trying to figure out why and how on the train to and from work, so I can submit a patch to the different authors.

    If you’re not using Prototype + LowPro, SWFObject is as easy as pie.

  • Chris
    February 1st, 2007 at 9:43

    I also wanted to recommend swfobject. I use it in several projects with good results.

  • Dado
    February 1st, 2007 at 11:04

    http://www.alistapart.com/articles/flashsatay/

  • Steve Williams
    February 1st, 2007 at 14:17

    It works, but as the flashsatay article notes, your movies need to be small to avoid streaming problems when viewing with IE (surprise, surprise). Plus you lose the flash version detection, which may be more or less of an issue depending upon the site.

    I’d recommend SWFObject or UFO if the movie is of any significant size or it’s deemed important to advise visitors their plugin needs upgrading to view the flash content.

  • Deborah
    February 1st, 2007 at 14:59

    Another vote for SWFObject. I recommend it to my fellow classmates who work in Flash and “dabble” in creating websites.

  • Mike D.
    February 1st, 2007 at 18:19

    As Steve notes above, this is actually a poor method for embedding Flash in the real-world. I do not recommend it really under any circumstances. Not only does it cause the streaming problems but it has issues piping data in via FlashVars in some scenarios.

    SWFObject is the defacto best way to embed Flash.

  • Rumble
    February 2nd, 2007 at 0:47

    I never really got to grips with using the Flash Satay method either, it seemed that as soon as I started using it for anything more complex than embedding a simple swf things would start to behave somewhat unpredictably. This was especially true when the swf to be loaded pulls in it’s content via XML or some other dynamic black magic.

    For me the major benefit of using javascript to embed Flash is that it gets around the ‘Click here to activate’ message that now appears in Internet Explorer when there’s Flash embedded directly in the HTML.

  • Robert Nyman - author
    February 2nd, 2007 at 8:24

    Thanks for your comments! I agree that SWFObject is a very good way to include Flash into your web pages, but it raises one interesting question: should we require JavaScript enabled to show a Flash movie?

    My answer: I don’t know. I guess it depends on the situation.

    However, as Steve and Mike points out, with streaming issues, it seems that it is the way to go to if it addresses those problems.

    Rumble,

    …it gets around the ‘Click here to activate’ message that now appears in Internet Explorer…

    I’m glad that you mentioned that, I was just waiting for someone to bring it up! To solve that, scripting definitely is the solution.

  • Chris
    February 2nd, 2007 at 10:18

    Robert,

    I have no remorse requiring JS to embed Flash.
    Because I think users who have Flash but not JS are a rare species.

  • Rumble
    February 2nd, 2007 at 12:34

    You can easily provide fallback content for users without javascript or flash by just by marking it up as normal inside the element which gets replaced by the flash object.

    You could even put an object tag inside the element to be replaced as a fallback for those who have flash but not javascript, although I also agree that you’re less likely to encounter users who have flash on with javascript off than you are the other way around.

  • Stefan Van Reeth
    February 2nd, 2007 at 12:37

    Hi Robert,

    Just one small thing: “should we require JavaScript enabled to show a Flash movie?”.

    Nope, not really. But I think Chris hits the nail with his remark. Maybe the way to go is as follows: use js when it’s availlable and fall back on your proposal between noscript tags. Everyone has the movie now and pages validate :). The streaming issues remain for the users without js, but hey, that’s THEIR choice, no?

  • Robert Nyman - author
    February 2nd, 2007 at 13:57

    Chris,

    Ok, and yes, I think it’s a fairly rare combination.

    Rumble,

    Absolutely, proper fallback should always be offered, no matter what solution you choose.

    Stefan,

    I’d prefer having normal content within regular tags, not noscript, in that case.

    …but hey, that’s THEIR choice, no?

    I don’t agree. For some, sure, but for many it might depend on certain proxy servers filtering out JavaScript code, over-ambitious antivirus programs, accessibility reasons with different devices etc.

  • Martin Odhelius
    February 2nd, 2007 at 14:22

    The problem with SWFObject is that you can not serve your page as application/xhtml+XML (with content negotiation of course)
    Does this UFO-script handle that?

  • Martin Odhelius
    February 2nd, 2007 at 14:27

    Ah, I did find the answer myself ;)
    “UFO supports MIME type application/xhtml+XML. Please note that browser support for MIME type application/xhtml+XML itself may vary and that Internet Explorer doesn’t support MIME type application/xhtml+XML at all.”‘

    Seems like an option then :)

  • Stefan Van Reeth
    February 2nd, 2007 at 20:23

    @Martin Odhelius
    Thanks for the tip, gonna check it out.

    @Robert
    Well, I have to disagree on that. I chose my ISP myself, when I surf with a PDA for instance I tend to do it voluntary, software on my pc is installed by me alone.

    If the ISP filters too much, get another. Can’t be a problem with them around by the thousands. Using a device with lesser functionality means also accepting you can’t have all. Programs filtering on your own pc can be disabled or replaced. Surfing on your employers network can be limited by proxies, yes. But be honest: if js is filtered, chances are that embedded content is too. So in the end, yes, I do think that I’m not responsible for handling every combination of services / hardware / software that can exist.

    And about the noscript: don’t you like to make things difficult ;)? Not that I don’t like looking for ways to fix things, but here’s nothing broken, only disliked. To me it’s a tag like another and I find it ideal for handling devices and browsers with reduced functionality. So their users will have most of the functionallity provided by scripting, but admitted, sometimes with some quirks. Which is the choice the user made (see last para). After all, the streaming issue will remain, with or without noscript. And there’s no way we can fix it without using scripting…

    I admit, I’m a scripting guy. But to me it’s the way to go to handle browser quirks. Embedding through (x)HTML has some issues discussed above, and why would I put up the users with access to js with them? That seems worse than just using a tag I don’t like.

    Ok, that sounded lecturish. Sorry for that. But how on earth can we learn from each other if we don’t back our views? Not that I know it all, far from it. But in this example I would stay clear of embedding directly, except as a fallback (wasn’t noscript intended for just that? ;)). Still, thanks for the tip to begin with. Didn’t think of it last time I embedded directly, so it was hello HTML again :D.

  • Robert Nyman - author
    February 2nd, 2007 at 20:45

    Stefan,

    Don’t worry. That’s the whole point of having comments, for people to express their view (in a civilized manner). :-)

    I love scripting too, but I don’t think we can ever take it for granted when developing a web site. It can be there to enhance the end user experience, but not as the cornerstone of it all (my stance on web applications differs slightly from this).

  • Stefan Van Reeth
    February 2nd, 2007 at 21:49

    Yeah well, web applications is what I usually make, so perhaps my view is a bit biased. And if we all agreed on everything, there wouldn’t be any progress, no? So keep on getting us to disagree :D.

  • Robert Nyman - author
    February 5th, 2007 at 9:05

    Stefan,

    Absolutely, let’s shake on that! :-)

  • Isofarro
    February 6th, 2007 at 20:34

    Using an object element prevents the Flash content from being exposed to a screen reader, which makes it a significant accessibility barrier.

    This is a good example of the situation where with today’s technology, valid markup conflicts with practical accessibility.

  • Robert Nyman - author
    February 7th, 2007 at 9:55

    Isofarro,

    Interesting. My take was that screen readers would interpret the fallback content within the object tags. I’ve done some testing where it seemed to work fine, but maybe it isn’t properly consistent?

  • cubus
    February 22nd, 2007 at 11:30

    Hello all,

    I did a little flash embedding test, to compare them on cross-browser compatibility - valid embed code - complexity of the code - active-x control activation - etc.

    You can find the test here: http://thinkthanks.be/demo/flash-embedding-techniques/

    I just started this test, so any suggestions or corrections are welcome.

  • John
    September 19th, 2007 at 15:25

    Interesting Article, but I tend to use SWFObject.

  • Flash XHTML guy
    October 3rd, 2007 at 13:45

    You can also try this example for inclusion fo Flash into XHTML:
    Valid Flash into XHTML

  • Mauricio
    October 9th, 2007 at 16:23

    Thank you very much for the info. This is an excellent method for displaying XHTML compliant flash content. You should consider submitting it to W3C that’s still recomending a 2002 article in ALA with a much more complicated method. Thanks again.

  • Robert Nyman - author
    October 9th, 2007 at 17:16

    Mauricio,

    Thanks! Maybe I should…

  • Vamsi
    January 25th, 2008 at 17:22

    Hello friends,

    I am currently getting a XHTML web design done by someone offshore. How do I know it’s XHTML and not HTML?

    Kindly advise

    Vamsi

  • Robert Nyman - author
    January 25th, 2008 at 19:39

    Vamsi,

    First, take a look at the DOCTYPE.

    Then, make sure to validate the code.

  • tanicos
    February 24th, 2008 at 11:03

    i browsed all the links and tutorials from here but could not find the XML+flash validation code.
    i have a flash form that reads a XML file to submit the content.how can i do this? i’ve got this line of code:
    FlashVars=”xmlfile=folder/filename.xml&w=720&h=580″
    thanks

  • Robert Nyman - author
    February 25th, 2008 at 10:08

    tanicos,

    Usually you can apply your variables to the end of URL that you use to include the movie (this depends on how the Flash movie is constructed).

    Otherwise, an approach (which is recommended) can be to use a JavaScript to include the Flash movie into the page, for instance FlashReplace.

  • Jane
    March 4th, 2008 at 15:02

    I like to add this article to my article dir if possible? link-bag directory
    Don’t know if this could be copied like so?

  • Robert Nyman - author
    March 4th, 2008 at 15:29

    Jane,

    As long as you link back to the original article, it is ok with me.

Share your thoughts:

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> . If you want to display code examples, please remember to write &lt; for < and &gt; for >.

Comment preview

All the proceeds from ad clicks will go to charity. However, if you like to give something directly to charity yourself, I recommend choosing from the listed ones below.

  • Save the Children
  • Red Cross
  • Cancer Research UK
  • WWF

Flickr pics

Web sites

Maps

Affiliation

Accessites - Quality Universal Design

Blogroll

Top results