¿Cómo incrustar un swf en la parte superior de una página html?

StackOverflow https://stackoverflow.com/questions/300200

  •  08-07-2019
  •  | 
  •  

Pregunta

Quiero insertar un swf sobre una página html, como un panel flotante de observación de video. Ya tengo un archivo SWF que ajustará automáticamente su tamaño de acuerdo con el tamaño del navegador, y el archivo SWF es parcialmente transparente. Pensé que solo podía agregar una etiqueta div, hacer que la posición sea absoluta y cambiar el índice z más grande, pero eso no funciona porque el swf simplemente reemplazó todo lo que está en la página.

Esto es lo que hice 

<script>
      swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
</script>

<body bgcolor="#000000">
      <div id="header"></div>
      <div id="shell">
          things in my html
      </div>
</body>

#header {
    position:absolute;
    z-index:100;

}

¿Alguna idea? Gracias.

¿Fue útil?

Solución

Una vez que su tamaño funcione correctamente, deberá configurar el wmode en transparente para poder ver qué hay detrás del flash, si no lo hace, el fondo será opaco.

Esta es una copia rápida de la documentos de swfobject , pero debería obtener el punto a través: 

<script type="text/javascript">

var flashvars = {};
var params = {wmode : "transparent"};
var attributes = {};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

Otros consejos

Creo que el problema con esto es que el CSS no funciona bien con las etiquetas <object />. El swfobject.embedSWF convierte el <div id="header"></div> en una etiqueta <=> con un conjunto de atributos que podrían estar afectando al CSS. Si crea un DIV envoltorio alrededor del encabezado DIV y aplica el CSS al DIV envoltorio, todo funciona mejor. También necesita agregar 100% de ancho y alto en el CSS. Aquí está la fuente revisada: 

<script>
    swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
</script>

<body bgcolor="#000000">
    <div id="wrapper">
        <div id="header"></div>
        </div>
    <div id="shell">
        things in my html
    </div>
</body>

#wrapper {
    position:absolute;
    z-index:100;
    width:100%;
    height:100%;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top