Evening Tip: Insert Flash The Correct Way
You create your site the right way. You follow all of the rules, so that in the end, you can proudly have a link to w3′s validator, confirming your site’s perfection. There’s just one problem: if you embed any flash into your page, you’ll get several errors. That’s because the embed tag is not a valid tag. You need to insert your flash the correct way!
What Not To Do
<embed src="player.swf" width="300" height="300" allowscriptaccess="always" allowfullscreen="true" />
This is the simplified version. If you generate the default HTML web page directly from flash, it’s ten times more ugly. In fact, it just might be longer than this article – Just to embed a single flash file! And it doesn’t even do it with valid HTML (in fact 19 errors).
This is the result. As you can see, there are 6 errors. All 6 from the embed element (5 from the
attributes, and 1 from the tag itself)
What You Should Do
First of all, you shouldn’t use the embed tag at all. Forget it! Since we don’t have “embed” any more, we’re only left with the object tag. It’s a good thing that all browsers support it in some way!
Within the Object tag we will use the following attributes:
type=”"
data=”"
width=”"
height=”"
We’ll need to specify the MIME type of what we’re inserting. In this case, we’re inserting flash. So for the type attribute, we specify “application/x-shockwave-flash”. We declare the source through the data attribute. I think everyone can guess what the width and height attributes do. So this is how you should insert your flash, for validity:
<object type="application/x-shockwave-flash" data="flash.swf" width="750" height="400"> <param name="movie" value="flash.swf" /> </object>
You still need the <param> tag as well. Let’s test this new code now:
Final Words
Isn’t that “congratulations page” just so…validating? No pun intended. Anyway, I hope you found this to be useful, and have a great week!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Connor Zwick
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Thanks for the tip.
Good to know.
;D short but informativ!
Supporting theese quick tips ;)
Keep them comming.
Quick tips are goooooooo!
Keep the quick tips!
Very useful! The quick tips are great.
Yeah…You’re right W3C is the name of the World Wide Web Consortium. But I was more referring to their site’s validator. And their site is w3.org.
I use swfobject (well I am trying to warn my clients to stop with Flash…) but this method is a rapid way to get flash on a page. Anyway the tips must go on. Thanks a lot
One thing to point out, an additional benefit of using the object tag is that object tags can be nested, making “graceful degradability” an automatic process.
In one of the examples on http://www.w3.org/TR/xhtml2/mod-object.html, you can see how this can be used to smoothly degrade from a java applet to an embedded video file, to a still image, and finally to text. The user never sees the “alternate” versions unless the “better” versions can’t be displayed.
Do not use this solution.
Use either Flash CS3′s JavaScript solution or SWFObject. Using this tutorial as your sole means of embedding Flash is just insane.
Great tip !
Thanks!
It sould be clear by now that this tutorial is giving a bad advice. Many knowledgeable users have already pointed-out that this method does not work in Safari and FireFox, and therefore using SWFObject method is still the only “good” method for embedding Flash.
Either nobody reads other people’s comments before posting theirs, or the “Great tip! thanks” comments that keep pilling-up are fakes.
As far as I know, this won’t work in all browsers. OBJECT and EMBED are supported (poorly) across browsers differently. W3C may insist on a particular method, but that doesn’t mean that IE6, IE7, and Firefox agree that they (W3C) are correct.
I love the simplicity of the means you provided here – I just don’t think that any type of object embedding has such a clean, elegant solution (though I wish it did!). Sort of like trying to embed a video file… dear lord. The work you need to go through to make sure it’s cross-browser compatible is just ridiculous.
great tip…… tks a ton.
can u also give some seo tips for a flash website? i mean i have my website — http://www.redesignyourbiz.com — which has the menu and other pages in one single movie. how can i score well with search engines?
thank your for the tip.
Nice little tip, thanks!
Quicktips ftw.
Nice tip! Keep’em comming.
Great Tip!
I have been searching for a while on how to embed flash and get it w3c valid.
Thanks!
I agree with some of the other commentators here – this is an odd tip when there is such patchy support for the object tag.
It remains a frustration for developers that the slightly fiddly swfobject, or invalid code, are the best ways forward.
Does anyone know what is being done by Adobe / W3C / browser vendors to improve the situation?
Quick tips like these are a great idea.
I also use swfobject as its easy to have alternate content that is SEO friendly..
Very nice!
Awesome! Thanks, man, keep ‘em coming!
nice & short… and usefull!!!!!
tnx a lot 4 the tip!
saved my life today. thank you. appreciated.
@insic…. you’re awesome
@dever… you’re not, you wiseacre
Keep the tips – and Jeffrey – you’re right; there’s no such thing as “old news”
i found this from my bookmarks..
http://latrine.dgx.cz/how-to-correctly-insert-a-flash-into-xhtml
This is why I said it’s old news (look at the article’s date). I also use(d) swfobject (I really like that you can show something when flash is disabled or not present).
Problems I found with simular things to this while experimenting is with only object tags in a strict doc it won’t in many major browsers like ie and opera. If you add in noscript tags around such stuff it will work in them but then won’t validate. So I am still hunting for the right combination that validates, works in most browsers, and offers an option to get flash if needed.
Apart from all the other comments, another thing I’ve noticed, is that it seems to load the flash file twice, according to Firebug.
nice tip! thanks!
Thank you for this one, I never knew of this.
Excellent Tips… Thanks
Caveats, caveats, caveats… This is a downgraded version A List Apart’s Flash Satay, by “downgraded” I mean it omits bits of code that will cause movies implemented with this method to stop streaming in IE. You will not notice the lag with smaller movies, but with larger ones you will see nothing but a big blank area until the _entire_ movie loads. There is a way to get around this (see/google: Flash Satay,) but it requires a separate “preloader” for every movie and an extra line of markup in your HTML.
Frankly, the whole thing is too much of a pain in the ass for me to bother with. I use conditional comments instead, which are sandwiched between simplified object and embed tags. No, it’s not ideal either, but all the other ways I’ve seen always involve more code and/or more work, making it a nightmare to maintain and read, and this way at least it validates!
What cenovis said about this method of embedding flash is correct.
***THIS METHOD BOTHCES YOUR FLASH FILES. ESPECIALLY THE PRELOADERS WONT WORK IN IE, AND YOUR USERS WILL SEE NOTHING BUT A BLANK BOX TILL THE WHOLE THING LOADS***
I spent many frustrating hours trying to figure out what the problem is, and all the while, this was right under my nose, causing me intense agony.
Personally, and after this experience, particularly, I decided to stick with the code that Flash CS3 spews out. It may be large/overwhelming/blah blah, but it works like a charm in all browsers, and that is what matters: your users seeing what you want them to.
Aditya.
It really helps, thanks mate
Very useful tip. Thanks for sharing.
Thanks for the tip. I have always hated how flash breaks the w3c validation page.
Oh Thanks very much I love this topic I have the serious problem about ajax loading my flash for many days I try to find the way to fix it but I can’t till I’ve read this topic wowww woww I can now thanks god.
Nice, but this not funtion in ie6
Nice tip, I was working from the HTML publish from Flash and it was all messy, now that I’ve started to picking up some more clean coding everything seems to float easier, thank you to everyone who gives this value information out, you guys are great!
Thanks, after I read this article, my flash header is perfect now.
thanx so much I was looking everywhere for this
works perfectly
Finallly… valid flash syntax… any way to add fullscreen?
great tip, thanks!
This is a very neat and tidy method, but it doesn’t take into account browser compatibility or checking for the correct flash version, which other methods do very effectively.
[url=http://wicketstuff.org/confluence/display/~ultram4rt]ultram pain management ededgonzalez [/url] [url=http://wiki.hudson-ci.org/display/~propecia8hvg]order pharmacy propecia assurance [/url] [url=http://docs2.codecauldron.org/display/~tramadol45g]tramadol make you tired Trisha [/url] [url=http://www.jugindex.org/display/~tramadol8ik]pet dosage for tramadol WATERMARK [/url] [url=http://wiki.directi.com/display/~klonopin5uvf]order Klonopin cheap prerequisites [/url] [url=http://www.amwiki.de/display/~acomplia7ui9]buy cheap acomplia overnight DeCanio [/url] [url=http://www.jugindex.org/display/~viagra8ik]cheapest viagra in Amsterdam ao [/url]
Very good tips .
Thank you.
Without a doubt the “standard” way of adding flash is SWFObject… in fact — now it’s SWFObject2 and there are plenty of “extras” you can do with it.
I recommend checking out http://www.gotoandlearn.com
Good stuff regardless
L
what a terrible tip