Insert Flash The Correct Way

Quick Tip: Insert Flash the Correct Way

on Aug 11th 2008 with 106 comments
Tutorial Details
  • Difficulty: Beginner
  • Completion Time: 15 Minutes

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).

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:

Validated

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!

Tags: Flash
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hi, I'm Connor Zwick-freelance blogger and designer. I love learning and teaching new topics in areas like HTML, CSS, PHP, Ruby on Rails, and last but certainly not least, jQuery. You can follow me on twitter or visit his design blogcyberantix.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
Newer Comments →
  • http://www.freshclickmedia.com Shane

    @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 :(

  • http://www.jaysalvat.com/ Jay Salvat

    Thanks for the tip.
    Good to know.

  • http://www.broof.de BroOf

    ;D short but informativ!

  • Medium

    Supporting theese quick tips ;)
    Keep them comming.

  • http://www.1pixelbrush.com Dan

    Quick tips are goooooooo!

  • NGP

    Keep the quick tips!

  • spadez

    Very useful! The quick tips are great.

  • http://cyberantix.org Connor
    Author

    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.

  • http://www.showpage.it Freddie

    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

    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.

  • http://www.satedproductions.com Michael Thompson

    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.

  • Pingback: pligg.com

  • http://www.shanekillian.net Shane

    Great tip !

    Thanks!

  • seb

    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.

  • http://www.kieru.com Rob

    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.

  • http://www.redesignyourbiz.com Immy

    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?

  • http://maiconweb.com Maicon

    thank your for the tip.

  • http://www.bengood.org Ben G

    Nice little tip, thanks!

  • http://na w1sh

    Quicktips ftw.

  • Timo

    Nice tip! Keep’em comming.

  • Roc

    Great Tip!

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

    Thanks!

  • http://www.collectiveid.co.uk Mark Steven

    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?

  • http://www.clikdevelopment.co.uk David Kindness

    Quick tips like these are a great idea.

    I also use swfobject as its easy to have alternate content that is SEO friendly..

  • http://benblogged.com/ Ben Blogged

    Very nice!

  • Wayne

    Awesome! Thanks, man, keep ‘em coming!

  • http://www.flickr.com/photos/sataflash SataFLASH

    nice & short… and usefull!!!!!

    tnx a lot 4 the tip!

  • http://www.justinhale.com jh.

    saved my life today. thank you. appreciated.

  • Fidgit

    @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”

  • http://www.muneefhameed.com muneefvc
  • http://blog.dever.ro Dever

    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

    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.

  • http://www.besthostingtop10.com Craig Templet

    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

    nice tip! thanks!

  • http://www.mabucplus.com Mark Abucayon

    Thank you for this one, I never knew of this.

  • Sumit

    Excellent Tips… Thanks

  • cenovis

    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!

  • http://www.wordmagics.com Aditya

    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

    It really helps, thanks mate

  • PJ

    Very useful tip. Thanks for sharing.

  • http://livingsweb.net Jeff Livings

    Thanks for the tip. I have always hated how flash breaks the w3c validation page.

  • http://www.idea2blog.com AonMusician

    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.

  • http://alexarevalo.com AlexArévalo

    Nice, but this not funtion in ie6

  • .rojas.

    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!

  • http://e-baju.com Rudi

    Thanks, after I read this article, my flash header is perfect now.

  • Cory

    thanx so much I was looking everywhere for this

    works perfectly

  • Carlos Chee

    Finallly… valid flash syntax… any way to add fullscreen?

  • Andrew

    great tip, thanks!

  • http://www.waste-creative.com Matt Stevens

    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.

  • Pingback: Embeber un video valido por la W3C | Adtribe

  • Pingback: Tutoriales de la web para tu web » Blog Archive » Insertar Flash de la forma correcta

← Older Comments
Newer Comments →