Question

I’m trying to do something unusual. I promise it has a purpose. I’m 90% sure it can’t be done, but wanted to double check with geniuses.

Is it possible to have an object/embeded .swf in the page, let it be displayed, but do not allow any interaction with it. As an example, can you somehow change the youtube embed code to display the player, but not allow any interaction with it at all?

I searched flash’s variable list, but didn’t see anything to do this.

Thanks

Answer 1

Use a layered approach: place a div element on top of the flash object, make it the same size and transparent. That’s all. No JavaScript needed. And to make IE6/7/8 happy, this of course doesn’t work, so we add a trick: a background and a zero-opacity. You may want to add the IE-only CSS in a separate file to prevent CSS invalidation.

Important: for this to work, wmode must be set to opaque (as noted by TheBrain earlier), the parent div must have a position set, the child div must have position:absolute and the width/height of the flash animation. The opacity, filter and background-color are for IE6/7/8 compatibility only. The code as-is works cross-browser (left out some details for clarity) and is demonstrated on this page in full.

**Update:**The width and height of the parent div element must be set to prevent some uncovered borders to creep in. By default, a div is 100% width. IE adds a left-margin and FF adds a bottom margin to the flash animation. By setting the dimensions explicitly, this will work as expected. To proof the cover is placed correctly, change the color and the opacity of the cover-div. This change is also updated in the demo page.

<div style="position:relative;width:728px;height:90px;">
    <div style="position:absolute;
          width:728px;height:90px;
          background-color:white;
          opacity:0;filter: alpha(opacity=0);">
        &nbsp;
    </div>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        width="728" height="90">
        <... params etc ...>
        <param name="wmode" value="opaque" />

        <embed width="728" height="90"
            type="application/x-shockwave-flash"
            wmode="opaque"
            etc-params=xyz>
        </embed>
    </object>
</div>