Come incorporare un file SWF in cima a una pagina HTML?

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

  •  08-07-2019
  •  | 
  •  

Domanda

Voglio incorporare un file SWF su una pagina HTML, come un pannello di visualizzazione di video mobile. Ho già un file SWF che regolerà automaticamente le sue dimensioni in base alle dimensioni del browser e il file SWF è parzialmente trasparente. Pensavo di poter semplicemente aggiungere un tag div, rendere la posizione assoluta e cambiare z-index più grande, ma non funziona perché SWF ha appena sostituito tutto ciò che è sulla pagina.

Ecco cosa ho fatto 

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

}

Qualche idea? Grazie.

È stato utile?

Soluzione

Una volta che le dimensioni funzioneranno correttamente, dovrai impostare wmode su trasparente per poter vedere cosa c'è dietro il flash, se non lo è lo sfondo sarà opaco.

Questo è un copypaste rapido dal documenti swfobject , ma dovrebbe ottenere il punto attraverso: 

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

Altri suggerimenti

Credo che il problema sia che il CSS non funziona bene con i tag <object />. swfobject.embedSWF trasforma <div id="header"></div> in un tag <=> con una serie di attributi che potrebbero influenzare il CSS. Se si crea un DIV wrapper attorno all'intestazione DIV e si applica il CSS al DIV wrapper, tutto funziona meglio. È inoltre necessario aggiungere la larghezza e l'altezza del 100% nel CSS. Ecco la fonte rivista: 

<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%;
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top