How to embed a SWF file in an HTML page?

Question

How do you embed a SWF file in an HTML page?

score 175 · Accepted Answer · edited Nov 26 '16 at 13:45

175

The best approach to embed a SWF into an HTML page is to use SWFObject.

It is a simple open-source JavaScript library that is easy-to-use and standards-friendly method to embed Flash content.

It also offers Flash player version detection. If the user does not have the version of Flash required or has JavaScript disabled, they will see an alternate content. You can also use this library to trigger a Flash player upgrade. Once the user has upgraded, they will be redirected back to the page.

An example from the documentation:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject dynamic embed - step 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>

    <script type="text/javascript">
        swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
    </script>

  </head>
  <body>
    <div id="myContent">
      <p>Alternative content</p>
    </div>
  </body>
</html>

A good tool to use along with this is the SWFObject HTML and JavaScript generator. It basically generates the HTML and JavaScript you need to embed the Flash using SWFObject. Comes with a very simple UI for you to input your parameters.

It Is highly recommended and very simple to use.

edited Nov 26 '16 at 13:45

Peter Mortensen

30,738
21
105
131

answered Sep 26 '08 at 02:03

Ronnie Liew

18,220
14
46
50

11

SWFObject is good. It simply works. An even more wonderful idea is to use a Content Delivery Network to get the javascript. I use Google's https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js – Ardee Aram Apr 01 '11 at 02:12
I had problems with using the object tag directly with IE9 but it works perfectly with swfobject. – AndyMcKenna Sep 05 '12 at 15:11
Thanks for your answer. Now can you suggest a player as well for accessing playback capability along with working example in html itself. ???? – Sumit Ramteke Dec 18 '13 at 04:16
Can this is work on that system where flash player is not install or it support all browsers. – Mohammed Javed Sep 03 '15 at 05:42
The project is now moved to GitHub: https://github.com/swfobject/swfobject and the new technique to embed swf object is `var el = document.getElementById("my-target-element"); swfobject.embedSWF("myContent.swf", el, 300, 120, 10);` – Lucky Jul 26 '16 at 13:11
swfobject no longer works properly with Chrome. Chrome new policy (HTML by default) is unrolled starting at version 55 and no longer initializes the variables that swfobject needs to test if Flash is installed. swfobject may give an incorrect message 'install flash' when in reality Flash is simply being blocked by Chrome, causing confusion for the user. For Chrome, the best course of action may be to simply use – Chris Dec 04 '16 at 18:16
Note: This answer is over 10 years old and very out of date. This doesn't play nicely with Chrome anymore as @Chris mentions. Please see some of the much better HTML5 answers. They are simple and supported directly by browser vendors and don't require downloading the swfobject library for your users. – joshuakcockrell Sep 19 '18 at 21:31

score 130 · Answer 2 · answered Sep 26 '08 at 01:54

130

<object width="100" height="100">
    <param name="movie" value="file.swf">
    <embed src="file.swf" width="100" height="100">
    </embed>
</object>

answered Sep 26 '08 at 01:54

Ólafur Waage

68,817
22
142
198

1

That code isn't XHTML-valid ... must not be within a object-tag. – Anheledir Oct 10 '08 at 00:19
59

No specification of the user to be XHTML valid, he asked for HTML – Ólafur Waage Oct 21 '08 at 00:09
3

this article have a good explanation about embedding flash and valid XHTML. http://yoast.com/articles/valid-flash-embedding/ – Joko Wandiro Nov 15 '13 at 06:05
3

why not use `data` attribute in [ – vladkras Nov 24 '14 at 14:08
@JokoWandiro the link your provided is unfortunately gone. Here's an archived version: https://web.archive.org/web/20180602024700/https://yoast.com/must-reads-for-website-seo/valid-flash-embedding/ – Hermann.Gruber Feb 13 '19 at 13:51

score 19 · Answer 3 · answered May 22 '15 at 22:13

19

How about simple HTML5 tag embed?

<!DOCTYPE html>
<html>
<body>

<embed src="anim.swf">

</body>
</html>

answered May 22 '15 at 22:13

Jan Desta

529
1
5
15

score 13 · Answer 4 · answered Oct 11 '12 at 19:57

This is suitable for application from root environment.

<object type="application/x-shockwave-flash" data="/dir/application.swf" 
id="applicationID" style="margin:0 10px;width:auto;height:auto;">

<param name="movie" value="/dir/application.swf" />
<param name="wmode" value="transparent" /> <!-- Or opaque, etc. -->

<!-- ↓ Required paramter or not, depends on application -->
<param name="FlashVars" value="" />

<param name="quality" value="high" />
<param name="menu" value="false" />

</object>

Additional parameters should be/can be added which depends on .swf it self. No embed, just object and parameters within, so, it remains valid, working and usable everywhere, it doesn't matter which !DOCTYPE is all about. :)

score 8 · Answer 5 · answered Oct 11 '12 at 19:43

8

<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/VhtIydTmOVU&amp;hl=en&amp;fs=1&amp;color1=0xe1600f&amp;color2=0xfebd01" 
style="width:640px;height:480px;margin:10px 36px;">

<param name="movie" value="http://www.youtube.com/v/VhtIydTmOVU&amp;hl=en&amp;fs=1&amp;color1=0xe1600f&amp;color2=0xfebd01" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="opaque" />
<param name="quality" value="high" />
<param name="menu" value="false" />

</object>

answered Oct 11 '12 at 19:43

Spooky

211
3
2

2

Note that object>data and movie>value parameters are the same. This code should work for any free to watch and share - youtube video. – Spooky Oct 11 '12 at 19:46
3

Generally speaking, it's desirable for answers to explain the code they give, rather than just dropping code on the asker. The goal is to learn about problems and prevent them in the future rather than make them vanish. – KRyan Oct 11 '12 at 21:56

score 8 · Answer 6 · answered Sep 26 '08 at 22:13

8

If you are using one of those js libraries to insert Flash, I suggest adding plain object embed tag inside of <noscript/>.

answered Sep 26 '08 at 22:13

Brian Kim

24,916
6
38
26

score 2 · Answer 7 · answered Sep 26 '08 at 02:08

2

I use http://wiltgen.net/objecty/, it helps to embed media content and avoid the IE "click to activate" problem.

answered Sep 26 '08 at 02:08

Eduardo Campañó

6,778
4
27
24

The "click to activate" problem is called "eolas activation" but is removed in actual versions of the IE. – Anheledir Oct 10 '08 at 00:20

score 2 · Answer 8 · answered Sep 26 '08 at 05:34

2

As mentioned SWF Object is great. UFO is worth a look as well

answered Sep 26 '08 at 05:34

phatduckk

1,775
1
14
17

score 2 · Answer 9 · edited Nov 26 '16 at 13:48

2

This one will work, I am sure!

<embed src="application.swf" quality="high" pluginspage="http://www.macromedia.com/go/getfashplayer" type="application/x-shockwave-flash" width="690" height="430">

edited Nov 26 '16 at 13:48

Peter Mortensen

30,738
21
105
131

answered Jul 25 '15 at 14:16

Stefan Đorđević

1,781
3
15
14

score 1 · Answer 10 · edited Nov 26 '16 at 13:48

What is the 'best' way? Words like 'most efficient,' 'fastest rendering,' etc. are more specific. Anyway, I am offering an alternative answer that helps me most of the time (whether or not is 'best' is irrelevant).

Alternate answer: Use an iframe.

That is, host the SWF file on the server. If you put the SWF file in the root or public_html folder then the SWF file will be located at www.YourDomain.com/YourFlashFile.swf.

Then, on your index.html or wherever, link the above location to your iframe and it will be displayed around your content wherever you put your iframe. If you can put an iframe there, you can put an SWF file there. Make the iframe dimensions the same as your SWF file. In the example below, the SWF file is 500 by 500.

Pseudo code:

<iframe src="//www.YourDomain.com/YourFlashFile.swf" width="500" height="500"></iframe>

The line of HTML code above will embed your SWF file. No other mess needed. Pros: W3C compliant, page design friendly, no speed issue, minimalist approach.
Cons: White space around your SWF file when launched in a browser.

That is an alternate answer. Whether it is the 'best' answer depends on your project.

for google @Stoic sorry your wrong it should be `//www...` using `//` means that if your on HTTPS or HTTP it works using the same connection type — Barkermn01, Jan 03 '14 at 19:29

score 1 · Answer 11 · answered Feb 21 '18 at 16:15

I know this is an old question. But this answer will be good for the present.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>histo2</title>
        <style type="text/css" media="screen">
        html, body { height:100%; background-color: #ffff99;}
        body { margin:0; padding:0; overflow:hidden; }
        #flashContent { width:100%; height:100%; }
        </style>
    </head>
    <body>
        <div id="flashContent">
            <object type="application/x-shockwave-flash" data="histo2.swf" width="822" height="550" id="histo2" style="float: none; vertical-align:middle">
                <param name="movie" value="histo2.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffff99" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="window" />
                <param name="scale" value="showall" />
                <param name="menu" value="true" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="allowScriptAccess" value="sameDomain" />
                <a href="http://www.adobe.com/go/getflash">
                    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                </a>
            </object>
        </div>
    </body>
</html>

score 1 · Answer 12 · edited Aug 27 '20 at 12:59

Thi works on IE, Edge, Firefox, Safari and Chrome.

<object type="application/x-shockwave-flash" data="movie.swf" width="720" height="480">
  <param name="movie" value="movie.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#000000" />
  <param name="play" value="true" />
  <param name="loop" value="true" />
  <param name="wmode" value="window" />
  <param name="scale" value="showall" />
  <param name="menu" value="true" />
  <param name="devicefont" value="false" />
  <param name="salign" value="" />
  <param name="allowScriptAccess" value="sameDomain" />
  <a href="http://www.adobe.com/go/getflash">
    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
  </a>
</object>

score 0 · Answer 13 · answered Sep 12 '14 at 10:00

This worked for me:

    <a target="_blank" href="{{ entity.link }}">
        <object type="application/x-shockwave-flash" data="{{ entity.file.path }}?clickTAG={{ entity.link }}" width="120" height="600" style="visibility: visible;">
            <param name="quality" value="high">
            <param name="play" value="true">
            <param name="LOOP" value="false">
            <param name="wmode" value="transparent">
            <param name="allowScriptAccess" value="true">
        </object>
    </a>

score 0 · Answer 14 · answered Apr 03 '20 at 21:26

0

Use the <embed> element:

<embed src="file.swf" width="854" height="480"></embed>

answered Apr 03 '20 at 21:26

score -1 · Answer 15 · edited Jan 12 '14 at 02:12

-1

You can use JavaScript if you're familiar with, like that:

swfobject.embedSWF("filename.swf", "Title", "width", "height", "9.0.0");

--the 9.0.0 is the flash version.

Or you can use the <object> tag of HTML5.

edited Jan 12 '14 at 02:12

psxls

6,807
6
30
50

answered Jan 12 '14 at 01:55

Allan

630
7
7

-1 swfobject isn't just part of JavaScript, you can't just call it without embedding the library. and most of the functionality for the – rorypicko Apr 16 '14 at 09:06
did you already tried it before saying its a very bad answer? keep in mind that very bad answer, is the answer that don't totally work or wrong. – Allan Apr 25 '14 at 05:53
the fact that you're informing someone to use javascript, and then pasting code using a javascript library that you haven't even mentioned makes it a bad answer – rorypicko Apr 25 '14 at 11:16
I already mentioned to used Javascript and gave the script. If I gave the whole working code/script that makes a spoonfeeding. The script is fine its only a logic. – Allan May 07 '14 at 06:18
You're misunderstanding my comment. You haven't told him to include the SWFObject Javascript file – rorypicko May 07 '14 at 08:29

How to embed a SWF file in an HTML page?

15 Answers15

Linked