In “QuickTime Web Movie Secrets,” I shared a JavaScript-and-CSS method to play multiple QuickTime movies in the same area on a webpage. Clicking a text link opened the corresponding video inside a DIV. The links contained a JavaScript function call that passed the movie’s URL, height, and width to Apple’s QuickTime embedding script, AC_QuickTime.js, and then inserted the result in the target DIV with the innerHTML method.

At the time I wrote the article, clicking a second link while a movie was playing caused the second movie to start playing simultaneously, which was annoying. Apple seems to have fixed this behavior in newer versions of QuickTime, but several readers asked if there was an even easier way to open multiple movie links in one “stage.” They also wanted to use thumbnail images instead of text links.

Here’s a super-easy hack I found. It doesn’t even use JavaScript, just an iframe for the player area and a target attribute for the links. Consequently, there’s no QuickTime detection, so visitors without QuickTime (or whatever codec your media file requires) may get unexpected results.

On the plus side, this technique seems to work on the iPhone. (One quirk is that the browser jumps back one page after playing the movie.) Let us know in the comments how it goes for you. Click a number to start:

Code for player: <iframe width="188" height="152" frameborder="0" marginwidth="0" scrolling="No" marginheight="0" id="stage" name="stage" src="curtain136.jpg"></iframe>

Code for buttons: <a href="movie1.mov" target="stage"><img src="poster1.gif" alt="Movie 1" width="40" height="34" /></a>

Note: The actual movie size is 160x120 pixels. Adding 16 to the height to account for the QuickTime controller bar makes that 160x136. However, Safari centers the movie vertically before drawing the controller, cutting off the bottom. Therefore, I padded the frame to 188x152 to create a border.