Como incorporar um swf no topo de uma página html?

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

  •  08-07-2019
  •  | 
  •  

Pergunta

Eu quero incorporar um swf mais de uma página html, como um painel de assistir a um vídeo flutuante. Eu já tenho um arquivo swf que irá ajustar automaticamente o seu tamanho de acordo com o tamanho do navegador, e o arquivo SWF é parcialmente transparente. Eu pensei que eu só posso adicionar uma tag div, fazer a posição absoluta e mudança z-index maior, mas isso não funcionar porque o swf acabou de substituir tudo o que está na página.

Aqui está o que eu fiz 

<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;

}

Alguma idéia? Obrigado.

Foi útil?

Solução

Depois de conseguir o seu dimensionamento para trabalho corretamente, você precisará definir o wmode e transparente para ser capaz de ver o que está por trás do flash, se você não é fundo será opaco.

Esta é uma copypaste rápida do swfobject docs , mas deve ficar o ponto de vista: 

<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>

Outras dicas

Eu acredito que o problema com isto é que a CSS não funciona bem com etiquetas <object />. O swfobject.embedSWF transforma o <div id="header"></div> em uma tag <object /> com um monte de atributos que podem ser efetuando o CSS. Se você criar um DIV invólucro em torno do DIV de cabeçalho e aplicar o CSS a DIV invólucro, tudo funciona melhor. Você também precisa adicionar 100% de largura e altura na CSS. Aqui está a fonte revisto: 

<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 em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top