How to Embed SWF in Your WordPress Posts

If you have ever tried embedding a Shockwave Flash file into your WordPress blog then you know it can get messy. Besides, if you are hosting your blog on WordPress.com then you are not going to be able to upload flash for security reasons. If you do have your hosting account, however, then there are several ways you can go about uploading .swf files to your WordPress blog posts. The first way involves using a plugin. This way is preferred if you are not good with code. The other way requires you to know some basic html. In this article we are going to go over how to embed SWF in WordPress posts with a plugin and without a plugin.

Plugin Method

First, you need to download and install Easy Flash Embed for WordPress. This plugin is so simple that no settings are even added to your admin menu. All you have to do is used a shortcode when you are creating your posts like this:

[swf src="http://www.example.com/my-flash-file.swf" width=300 height=100]

Simply replace the src attribute with a link to your flash file and adjust height and width accordingly.

Download Easy Flash Embed plugin.

Code Method

For those of you who would like more control over your code we are now going to show you how to embed flash files directly into your WordPress posts, pages, or even themes. Although people have come up with numerous methods for doing this over the years the easiest and most standards compliant way is to use the <object> element.

The final code looks like this:

<object id="flashcontent" 
        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
        width="550px" 
        height="400px">
  <param name="movie" value="mymovie.swf" />
 
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" 
          data="mymovie.swf" 
          width="550px" 
          height="400px">
  <!--<![endif]-->
 
    <p>
      Fallback or 'alternate' content goes here.
      This content will only be visible if the SWF fails to load.
    </p>
 
  <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
 
</object>

Note that you are using 2 <object> elements. The outer element is targeting Internet Explorer while the inner element is for all the other browsers. You can change your fallback text if necessary. You can also add extra <param> options like wmode or allowScriptAccess.

P.S. you should always use wmode=transparent, so your embed doesn’t override existing content such as a floating bar. Check out our article on how to prevent Youtube oEmbed from overriding content.