Html – Possible to disable flash element

flashhtml

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

Best Answer

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>

Related Solutions

Html – How to disable browser autocomplete on web form field / input tags

Firefox 30 ignores autocomplete="off" for passwords, opting to prompt the user instead whether the password should be stored on the client. Note the following commentary from May 5, 2014:

The password manager always prompts if it wants to save a password. Passwords are not saved without permission from the user.

We are the third browser to implement this change, after IE and Chrome.

According to the Mozilla Developer Network documentation, the Boolean form element attribute autocomplete prevents form data from being cached in older browsers.

<input type="text" name="foo" autocomplete="off" />

Html – How to horizontally center an element

You can apply this CSS to the inner <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Of course, you don't have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering.

If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:

#inner {
  display: table;
  margin: 0 auto;
}

It will make the inner element center horizontally and it works without setting a specific width.

Working example here:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

EDIT

With flexbox it is very easy to style the div horizontally and vertically centered.

#inner {  
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%;
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

To align the div vertically centered, use the property align-items: center.

Best Answer

Related Solutions

Html – How to disable browser autocomplete on web form field / input tags

Html – How to horizontally center an element

EDIT

Related Topic