Como incorporar um swf no topo de uma página html?
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.
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%;
}