Preparing your Flash website for IE7

(This post contains more web-geekery; if you’re unfamiliar with things like HTML and JavaScript, you’ll want to get your webmaster or a web-savvy friend to help you out.)

I was messing around with my website a few days ago when I noticed something strange about the Flash audio player I was using. Specifically I had to click it twice to make it play anything. Upon further inspection, I noticed a new tooltip message popped up when I put the mouse over the player (see the image at right).

What happened is this: Microsoft (who make the Internet Explorer browser) is changing the way Flash and other embedded media works in web pages. Visitors that upgrade to the newest versions of IE will be required to activate embedded media by clicking on it before they can interact with it. The downside of this, of course, is that your visitors probably won’t know this — they might just assume your player is broken, and move on.

It gets worse: this change might be affecting your website right now, because it’s also included in Windows updates for IE6!

Fortunately, there’s an relatively easy fix. Embedded media such as Flash, Quicktime and other files can be written into the page with JavaScript.

Here’s how I fixed my own Flash player. First, I took all the HTML code for the jukebox and placed it inside JavaScript document.write() statements, like so:

document.write('<object type="application/x-shockwave-flash" data="jukebox.swf">');
document.write('<param name="movie" value="jukebox4.swf" />');
document.write('<param name="quality" value="high" />');
document.write('Don\'t have Flash? Try the <a href="/music/">Downloads section &raquo;</a>');

I copied these lines into a separate file called jukebox.js and uploaded it to my web server.

Then, at the spot where the jukebox HTML used to be, I inserted the following line:

<script src="jukebox.js" type="text/javascript"></script>

Here’s why this works: by moving the jukebox HTML to an external JavaScript file, the jukebox is no longer considered to be “embedded” in the page. So IE allows visitors to use it without requiring the extra click.

You’ll probably have to do this for any embedded audio or video content. Fortunately, the jukebox is the only piece of Flash I use on my website. For those artists with all-Flash sites — well, you’ve got your work cut out for you!

3 responses

  1. Great article! I just upgraded to IE7 and was trying to comb through the IE settings to get rid of the problem. Thanks for the tip! It works great and saved me the time of figuring it out for myself.

  2. Does your Flash audio player still work in IE7?…

    Last week Microsoft rolled out Internet Explorer 7, and it reminded me that earlier this year I wrote a short tutorial on how to get Flash audio players to work smoothly in IE7. I wrote it specifically for non-tech-savvy musicians……

  3. […] Correspondent Scott Andrew penned this little tutorial a few months ago to help musicians and non-techies get flash music players and other “embedded” widgets working properly inside Internet Explorer 7. Just a quick bump, since lots of folks seem to be searching the site for this. […]