SWFObject - compliant and works nicely in WordPress

By Murray Bourne, 19 Sep 2006

Update (Jul 2013): I no longer use the following solution for embedded videos (including the one below). Most mobile devices do not support Flash, so I'm now using YouTube's embed code, which involves an iframe.

I was impressed - and rather bemused - when a friend today pointed out that I had examples of non-XHTML-compliant code on my blog. (I am picky about making sure my code is standards-compliant.)

Anyway, I had been meaning to implement SWFObject, a javascript solution for displaying Flash, for a few weeks. So I was motivated to do it just now and below is the result. (It will just look like another YouTube video, but the code behind it is very neat.)

Essentially it involves calling the JS file "swfobject.js" and then passing the movie parameters to a function. The javascript then replaces the content of a <div> with the movie. Clever stuff - and XHTML compliant :-). Of course, replace where I have *** with your own path to the js script.

Updated: This is fussier that I first thought. WordPress adds various <br /> code bits in the middle of the javascript, and this can mess with how it works. To solve the problem, remove all hard carriage returns (line spaces) within the code (except the "var so" line), so it is all bunched up together. I have updated the following:

<script type="text/javascript" src="***/swfobject.js"></script><div id="flashcontent">This text gets replaced by the Flash movie.</div><script type="text/javascript"><!--
var so = new SWFObject("https://www.youtube.com/v/hY1H0rvoLUY", "mymovie", "425", "350", "7", "#efefef"); so.write("flashcontent"); //--></script>

Now, you can watch the movie "Reppin the Calculus".

Go on, I know you want to...

See the 5 Comments below.

5 Comments on “SWFObject - compliant and works nicely in WordPress”

  1. alQpr » Blog Archive » swf in WordPress says:

    [...] This post by Zac at squareCircleZ discusses SWFObject, an XHTML compliant javascript for inserting .swf files in blogs [...]

  2. Matt Swanner says:

    AWESOME. I was hoping to pull this off without having to install some ridiculous plug-in. Thanks so much for the post - saved me a ton of heartache and swearing. :]

  3. Murray says:

    You're welcome, Matt. Anything to reduce heartache!

  4. robert brooks says:

    having an issue with this in my wp blog:
    This text gets replaced by the Flash movie.<!--//

    ^-- That's my code, not sure whats wrong. any ideas? the movie is simply not showing up.

  5. Murray says:

    Hi Robert

    How about publish your post and let me know the URL so I can try to spot the problem for you.

Leave a comment

Comment Preview

HTML: You can use simple tags like <b>, <a href="...">, etc.

To enter math, you can can either:

  1. Use simple calculator-like input in the following format (surround your math in backticks, or qq on tablet or phone):
    `a^2 = sqrt(b^2 + c^2)`
    (See more on ASCIIMath syntax); or
  2. Use simple LaTeX in the following format. Surround your math with \( and \).
    \( \int g dx = \sqrt{\frac{a}{b}} \)
    (This is standard simple LaTeX.)

NOTE: You can't mix both types of math entry in your comment.