Question

Embedding a Quicktime video on a page as a graceful fallback for the IE family of browsers (no flash / html5). I have a div overlaying the video later on, so the Quicktime embed must be wmode=transparent. Below is the embed code:

<embed src="test.mp4" width="300" height="400" wmode="transparent" autoplay="true" scale="tofit" />

The problem is: the embed area flashes white before loading the quicktime plugin. Embed succesfully completes and video begins playing, the controlbar however is blocked out white.

Any ideas as how to fix this? (Changing wmode is not an option). This occurs in all IE browsers + FF3.6 (haven’t tested higher versions).

Thanks.

Answer 1

The player hiding the control bar in IE is because of wmode="transparent". Live example, tested in all versions of IE (6/7/8 and 9) and I saw the same behavior
However setting wmode="opaque" shows the control bar. Live example, tested in all versions of IE (6/7/8 and 9) and saw the same behavior. But the issue with wmode="opaque" is we cannot show any overlay (dom element) on top of the player.

FF 3.6 with wmode="transparent" do not show anything, I mean the player itself is not visible. Live example.
But with wmode="opaque" everything works fine without any issue, we can have overlay also on top of the player. Live example

In Chrome 13 with wmode="transparent" everything works fine. Live example.
But with wmode="opaque" the only issue is we cannot show any overlay on top of the player. Live example

I think this will give you enough idea about the issues with Quicktime player across most of the modern browsers related to wmode and control bar problems.

Working demo

• This works in all browsers IE (all versions), and Chrome 13. In FF 3.6 works only with wmode="opaque" and also supports overlay. So for FF you might want to set wmode conditionally.

Working demo with bgiframe for overlay.

http://jsfiddle.net/Q3yBR/23/