How to write valid HTML/XHTML code to include Flash
Updated May 27th 2008
An alternative suggested solution is using FlashReplace.
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…):
46 Comments/Reactions
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.
February 1st, 2007 at 9:43
I also wanted to recommend swfobject. I use it in several projects with good results.
February 1st, 2007 at 11:04
http://www.alistapart.com/articles/flashsatay/
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.
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.
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.
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.
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,
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.
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.
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.
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?
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.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.
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?
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
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 
.
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).
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
.
February 5th, 2007 at 9:05
Stefan,
Absolutely, let’s shake on that!
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.
February 7th, 2007 at 9:55
Isofarro,
Interesting. My take was that screen readers would interpret the fallback content within the
objecttags. I’ve done some testing where it seemed to work fine, but maybe it isn’t properly consistent?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.
September 19th, 2007 at 15:25
Interesting Article, but I tend to use SWFObject.
October 3rd, 2007 at 13:45
You can also try this example for inclusion fo Flash into XHTML:
Valid Flash into XHTML
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.
October 9th, 2007 at 17:16
Mauricio,
Thanks! Maybe I should…
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
January 25th, 2008 at 19:39
Vamsi,
First, take a look at the DOCTYPE.
Then, make sure to validate the code.
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
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.
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?
March 4th, 2008 at 15:29
Jane,
As long as you link back to the original article, it is ok with me.
July 23rd, 2008 at 8:57
What i want to know is if you use JS to put a swf on your page is that code valid? From what i remember when I worked with this my movie would load with no problems but the code was not respecting w3 standards. What do you know about this?
August 18th, 2008 at 22:54
Alexandru,
It is true that some invalid code, such as the
embedelement is used to get the best results. This is covered more in the post about FlashReplace, if you’re interested.September 26th, 2008 at 13:42
[...] Flash einbinden: A List Apart: Articles: Flash Satay: Embedding Flash While Supporting Standards How to write valid HTML/XHTML code to include Flash – Robert’s talk – Web development and Inte… deconcept ? You’ve got your good thing, and I’ve got mine ? SWFObject: Javascript [...]
September 27th, 2008 at 8:26
I run a video blog, and making Flash embed code validate was such a pain for me too, so my buddy and I at Done21 made a free web tool called Validifier at http://validifier.com/ that does it all automatically. Hopefully this helps someone!
September 29th, 2008 at 12:25
Nick,
Thanks for sharing!
November 12th, 2008 at 15:20
For my blog, I use a Javascript method, I include the SWF in the HTML page from a link to this file.
I mean once the page is loaded, I browse all links, if the link is to a SWF file, I create the good HTML and the Flash is loaded.
Have a look, its very useful (I use JQuery just for the $ function):
http://www.thomasdecaux.net/jquery/how-to-display-a-flash-from-just-a-link.html
Enjoy!
November 12th, 2008 at 15:21
Sorry I use swfobject as well but you can replace it by pure HTML.
November 12th, 2008 at 15:54
Thomas,
Cool, thanks for sharing!
April 2nd, 2009 at 18:04
thanks a lot sir. I have applied your method for my website redesignyourbiz.com
June 17th, 2009 at 16:41
[...] I recently had to write a cross-browser and XHTML Valid code, that embeds Flash content. Well, this is a very discused issue, and found a very simple solution to it via (http://robertnyman.com/2007/02/01/how-to-write-valid-htmlxhtml-code-to-include-flash/) [...]
August 22nd, 2009 at 12:11
Hi guys, well, nice article.
I’m having touble with flash as it always stays on top, so if you have let’s say drop down menu at the top, there is a problem, because flash overlaps my menu… Any solutions?! This will be much appreciated. Thanks.
August 22nd, 2009 at 12:28
Design freak,
Glad it helped you out!
roses london,
The only solution I know about is the one mentioned in How to put an HTML element on top of a Flash movie. It is not ideal, however.
Good luck!
September 16th, 2009 at 11:58
Thanks for providing this beautiful information.
April 30th, 2010 at 12:02
Thanks a bunch for sharing this resource. I have implemented this and got the results. Kudos to you
April 30th, 2010 at 12:13
Web 2.0 Design,
Glad you like it!
Write a comment
Twitter reactions