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…):
I also wanted to recommend swfobject. I use it in several projects with good results.
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.
http://www.alistapart.com/articles/flashsatay/
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.
Another vote for SWFObject. I recommend it to my fellow classmates who work in Flash and "dabble" in creating websites.
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.
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.
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.
Robert,
I have no remorse requiring JS to embed Flash.
Because I think users who have Flash but not JS are a rare species.
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.
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?
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 <code>noscript</code>, 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.
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?
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 π
@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.
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).
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.
Stefan,
Absolutely, let's shake on that! π
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.
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?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-techni…
I just started this test, so any suggestions or corrections are welcome.
Interesting Article, but I tend to use SWFObject.
You can also try this example for inclusion fo Flash into XHTML:
Valid Flash into XHTML
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.
Mauricio,
Thanks! Maybe I should…
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
Vamsi,
First, take a look at the DOCTYPE.
Then, make sure to validate the code.
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
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.
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?
Jane,
As long as you link back to the original article, it is ok with me.
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?
Alexandru,
It is true that some invalid code, such as the
embed
element is used to get the best results. This is covered more in the post about FlashReplace, if you’re interested.[…] 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 […]
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! π
Nick,
Thanks for sharing!
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…
Enjoy!
Sorry I use swfobject as well but you can replace it by pure HTML.
Thomas,
Cool, thanks for sharing!
thanks a lot sir. I have applied your method for my website redesignyourbiz.com
[…] 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/) […]
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.
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!
Thanks for providing this beautiful information.
Thanks a bunch for sharing this resource. I have implemented this and got the results. Kudos to you π
Web 2.0 Design,
Glad you like it!
Can I embed html in a flash website or play youtube videos on a flash website?
Jeff,
Eh… Even if a web site is done all in Flash, you will (practically in all cases) still need HTML to present it, and in Flash, you should be able to have whatever HTML code you want to.
Thanks for sharing!
wah kia baat he teri cheetey…..