Evening Tip: Insert Flash The Correct Way

Aug 11th in HTML & CSS by Connor Zwick

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!

Author: Connor Zwick

I am a freelance web designer. I am currently renovating my personal site, which will be up within the month hopefully. I know HTML, CSS, Javascript, JQuery, PHP, Flash, and Ruby on Rails. I am also doing several website for pay currently. As well as designing a web site for a robotics team for free. This website will feature a lot of what I will cover in this tutorial. I have also coded a media management site and blog in Ruby on Rails. I also have extensive Photoshop experience.

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!

Check out some more great tutorials and articles that you might like

Win Two Tickets To The Hottest Flash Conference Ever!!! News
How To Implement sIFR3 Into Your Website Javascript & AJAX
Evening Tip: Create A “Click And Drag” Function With Javascript Javascript & AJAX

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

User Comments

( ADD YOURS )

Alex Coleman August 11th

I love these little tips…quick and easy ways to verify your work or discover an alternate way to do things. Thanks.
Tobi August 11th

I always use swfobject for swf-files in html.
http://code.google.com/p/swfobject/
Jeffrey Way August 11th

Everyone - If you enjoy these quick tips, please leave a comment and let us know. We’ll be experimenting with a nightly (hopefully) quick tip this week. If we find that you all like them, we’ll continue! Otherwise, they’re gone.

Please leave a comment and let us know your thoughts! Thanks.

-Jeffrey
jamie August 11th

do you know of a way to include a flash file as a link. I want to display a thumbnail and when clicked on will bring up the larger image in the lightbox. Both images I want to be .swf.
Marek holeszowski August 11th

Keep them coming, although they may be obvious to some im sure theres tips out there that would benefit everyone in one way or another
Jonathan August 11th

Funny as I read something similar, oh, maybe a two weeks ago and I forgot to bookmark it for later reading. So thanks Connor, just what I needed.

Jeffrey Bring on the tips (Bit sized or Super sized - both are always welcome)
neil August 11th

Keep ‘em coming.. I knew this one but i’m sure you have loads up your sleeves that I won’t know!
Connor August 11th

Glad you found this useful Jonathan.
rob August 11th

great tip, very useful thanks!
pickupjojo August 11th

Great tip, thanks for sharing!
Andrew August 11th

These tips are of great importance. Cleaner code makes for a better http://WWW.
It would be great to see something on a somewhat regular basis like this. Even the simplest of things can be new to a whole audience of people. Especially those of us who have been doing the “old” or “wrong” way for so many years.

I can’t wait for more.
Furley August 11th

inside the object tag you should put an image or something for those that dont have flash/need to upgrade
Ben Griffiths August 11th

Great little tip, thanks
Tommy M August 11th

Of course post some quick tips! It’s better than not having any updates This was useful I’m sure for some people (I never use Flash).
Chris August 11th

We Like Tips!
Connor August 11th

You’re right Furley, but I figured that that wasn’t ‘quick’ enough
Tyler August 11th

Won’t this fall prey to the IE Click to Activate “feature?”
Mike August 11th

Is it not better to use swfobject to get around the activeX problem in good ole Internet Explorer?
Dan Harper August 11th

Thanks for this. And that’d be a great feature for the site!
Ibrahim August 11th

Great tip, Keep them up Jeffrey
Kaia August 11th

I really do enjoy these ‘quick tips’ and think they will be a great feature for the site! Keep ‘em coming!
demogar August 11th

What about youtube?
Tim August 11th

Great Tips!!!

Though, I do think that a better solution for embedding flash in a page is through SWFObject. I would recommend looking into it and doing either a quick tip or full tutorial on it.

http://code.google.com/p/swfobject/
Rick August 11th

Thanks for this tip. I will have to try it. I didn’t know there was an alternative to embed.
Vin Thoms August 11th

love the quick tips.
Andrew August 11th

Love the tips! First thing i check when i get to work in the morning is the nettuts feed!
Dan August 11th

+1 for more quick tips. These little tidbits are what make good coders great.
Dever August 11th

Sorry to be negative, but your quick tip is kind of old news (more than a year)
I apologize to all the people that already posted and didn’t know about it.
Jeffrey Way August 11th

@Dever - I don’t think it is possible for a tip to be “old news”.
Braden Keith August 11th

keep em

Dreamweaver will automatically prompt you to fix it if you do it wrong.
Braden Keith August 11th

@Jeffrey:
Valid point! lol
Braden Keith August 11th

May I suggest as an improvement to the site, you make an easy way to where we can contact you. I’m not sure if my comment was lost in all of them or what, but I’d still love to hear from you Jeffrey via email if you will.

I would appreciate it
Jeffrey Way August 11th

@Braden - Just emailed you.
Agi August 11th

Forget the object method as it still has the problem of the users having to click on the flash to focus it plus too many browser’s handle the object code differently for it to be a successful implementation.

just use swfobject - http://code.google.com/p/swfobject/
Jason August 11th

Bookmarked!
Taylor Satula August 11th

ghetto.
Very helpful
Will use
Khalid August 11th

Does this work for FlashPaper documents as well? The only way I can get them to work successfully in Firefox and IE is to upload using Contribute software. I would love to just embed them directly from my code. Any ideas?
Robin August 11th

This is actually still not the correct way to embed Flash. SWFObject must be used or your Flash will not operate correctly in Internet Explorer.
insic August 11th

keep it coming. i like these feature of the site. quick tips for us. very helpful.
insic August 11th

@Robin leave the damn internet explorer behind.
vlp August 11th

Robin is right.

Insic > you cannot leave the IE behind, because still most of the users are browsing with IE and you don’t want to lost them.
Fouad Masoud August 11th

Ok worked fine for me, still the question that stopped me using this a year ago why doesn’t it support flashvars for firefox?

any idea how this can be worked around?
Fouad Masoud August 11th

Just got this from adobe live docs “FlashVars must be assigned in both the object and embed tags in order to work on all browsers.”

http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000668.html

so again wont be using it, its either good old un-valid way or swfobject.

though good post and keep em coming “meaning the quick tips”.

Cheers
mattems August 11th

good tutorial but i think swfobject def takes the cake. Perfect solution and it does everything you need.

1. ie activation problem
2. cross browser
3. can install flash if user doesnt have it.
or
gracefully show something to replace flash.
hans August 11th

Great info, works perfectly but I still don’t understand why Firefox don’t support
Firefox is making a ness of the flash with this param
This param is working great in IE7, Opera 9.5 and Safari 3.x.
Mark McDonnell August 12th

You’ll all have to keep using SWFObject for the time being I’m afraid as this solution only works for Internet Explorer.

I really would have expected the author to have checked this method using both Firefox and Safari before telling people this is the correct way to embed flash?

I’m sure that the people who don’t already use SWFObject appreciated this ‘tip’ but if the proposed solution isn’t cross-browser compatible then for me it isn’t a viable solution.

Kind regards,

M.
James August 12th

Yep, very useful. I’m still a tiny bit anti flash (mainly because I am a real n00b in that area) but when I do get around to using it I’ll be using the methods described in this tut! thanks!
Pete August 12th

This might be old news for some of you but Microsoft actually removed the ‘click to activate’ from IE in April this year!!

http://blogs.msdn.com/ie/archive/2008/04/08/ie-automatic-component-activation-now-available.aspx

http://www.adobe.com/devnet/activecontent/

Obviously this relies on people to update their systems. Eventually though it will be a thing of the past
Shane August 12th

I’m not keen on flash either. Typically, as a user, I find flash sites use poor UI and annoy the hell out of me.

That’s not really relevant though - I like the idea of the quick tips on nettuts.

One more thing - it’s the W3C, not w3, though w3 is the domain name - perhaps that’s what you meant?
Shane August 12th

@insic said “@Robin leave the damn internet explorer behind.”

Unfortunately, millions of users are not as informed as us net geeks and use IE on a daily basis. We still have to deal with it
Jay Salvat August 12th

Thanks for the tip.
Good to know.
BroOf August 12th

;D short but informativ!
Medium August 12th

Supporting theese quick tips
Keep them comming.
Dan August 12th

Quick tips are goooooooo!
NGP August 12th

Keep the quick tips!
spadez August 12th

Very useful! The quick tips are great.
Connor August 12th

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.
Freddie August 12th

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
Stephanie August 12th

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.
Michael Thompson August 12th

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.
Shane August 12th

Great tip !

Thanks!
seb August 12th

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.
Rob August 12th

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.
Immy August 12th

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?
Maicon August 12th

thank your for the tip.
Ben G August 12th

Nice little tip, thanks!
w1sh August 12th

Quicktips ftw.
Timo August 12th

Nice tip! Keep’em comming.
Roc August 12th

Great Tip!

I have been searching for a while on how to embed flash and get it w3c valid.

Thanks!
Mark Steven August 13th

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?
David Kindness August 13th

Quick tips like these are a great idea.

I also use swfobject as its easy to have alternate content that is SEO friendly..
Ben Blogged August 13th

Very nice!
Wayne August 13th

Awesome! Thanks, man, keep ‘em coming!
SataFLASH August 13th

nice & short… and usefull!!!!!

tnx a lot 4 the tip!
jh. August 13th

saved my life today. thank you. appreciated.
Fidgit August 13th

@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”
muneefvc August 15th

i found this from my bookmarks..

http://latrine.dgx.cz/how-to-correctly-insert-a-flash-into-xhtml
Dever August 15th

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).
Ron August 17th

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.
Craig Templet August 21st

Apart from all the other comments, another thing I’ve noticed, is that it seems to load the flash file twice, according to Firebug.
Rap September 3rd

nice tip! thanks!
Mark Abucayon September 6th

Thank you for this one, I never knew of this.
Sumit September 6th

Excellent Tips… Thanks
cenovis September 7th

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!
Aditya September 11th

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.
sachin September 12th

It really helps, thanks mate
PJ September 18th

Very useful tip. Thanks for sharing.
Jeff Livings September 20th

Thanks for the tip. I have always hated how flash breaks the w3c validation page.
AonMusician September 29th

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.