Come eliminare lo spazio bianco attorno a un elemento <embed>?

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

  •  23-08-2019
  •  | 
  •  

Domanda

RIEPILOGO:un incorporamento con larghezza e altezza del 100% spinge le dimensioni dei suoi genitori a corrispondere al 100% di larghezza e altezza del nonno.Come posso fare in modo che l'elemento embed comprima tutto lo spazio bianco attorno ad esso in modo che si adatti perfettamente alla larghezza e all'altezza del suo genitore?

Ho una pagina con un'immagine, che dopo essere stata cliccata viene sostituita da un elemento incorporato che riproduce un filmato QuickTime.

Il problema è che il filmato incorporato presenta una grande quantità di spazio bianco attorno.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head><title></title></head>
    <body>
        <div style="border:1px solid #000;">
        <embed id="iframeMovie" height="100%" width="100%" controller="true" target="myself" href="" src="http://images.apple.com/quicktime/troubleshooting/mov/qt_installed.mov" type="video/quicktime"></embed>
        </div>
    </body>
</html>

Il video ha dimensioni sconosciute, quindi come posso eliminare questi spazi bianchi lasciando altezza e larghezza al 100%?

MODIFICARE:Anche se non viene visualizzato, in realtà sto cancellando il riempimento e i margini.Lo spazio bianco rimane ancora.

MODIFICA 2:Lo spazio bianco in questione è tra il film e il bordo nero, non tra il bordo nero e il browser.

È stato utile?

Soluzione 7

si scopre che non c'è nessun modo di fare questo altro che rendere la scala di film alle dimensioni del padre utilizzando scale="aspect".

Anche se non è la soluzione perfetta, si avrà a che fare, per ora.

Altri suggerimenti

Stai cancellando il margine browser predefinito e imbottitura? In caso contrario, è necessario farlo.

La maggior parte delle persone utilizzano stili di reset CSS per normalizzare margin e padding tutti i browser. Una buona da usare è Eric Meyer: CSS reset

EDIT: Per rimuovere lo spazio sotto l'embed, impostare display: block sul embed. Vedere: http://media.nodnod.net/embed.html

WOOHOO,
Ho cercato a lungo questa risposta e finalmente l'ho trovata!
Dovrai inserire l'elemento embed in un elemento oggetto che si trova in un iframe o un frame:
La pagina iframe

<html>
<body>
<iframe src="sample.html" height="100%" width="100%">
</iframe>
</body>
</html>


l'origine dell'iframe

<html>
<body>
<object height="100%" width="100%">
<embed src="sample.mov" height="100%" width="100%"/>
</object>
</body>
</html>

Assicurati che i valori di altezza e larghezza nell'iframe, nell'oggetto e nell'elemento incorporato siano gli stessi.

Non ho familiarità con gli elementi incorporare, ma mi sembra che quando si imposta la larghezza al 100%, si imposta la larghezza dell'elemento genitore, che è un div in questo caso e un div occupa tutta disponibili larghezza è un elemento di blocco.

Quindi, è possibile galleggiare la div circostante o visualizzarlo in linea che la sua dimensione regolare per il contenuto, invece dello spazio disponibile attorno ad esso.

Prova a impostare float: left sia sul div e l'elemento incorporato proprio come questo. Che rimuovere lo spazio vuoto aggiuntivo. 

<div style="border:1px solid #000; float: left; width: 100%; height: 100%;">
   <embed id="iframeMovie" height="100%" width="100%" style="float: left" controller="true" target="myself" href="" src="http://images.apple.com/quicktime/troubleshooting/mov/qt_installed.mov" type="video/quicktime"></embed>
</div>

Hmm ...

E 'un brutto hack, ma si potrebbe utilizzare una tabella: 

<table width="100%" height="100%">
  <tr>
    <td align="center" valign="middle"><embed /></td>
  </tr>
</table>

Hai usato un ispettore DOM per verificare gli spazi non è parte del embed?

Inoltre, si può mettere in un pannello / div / etc e la mensa con il css: 

position: relative; top: -10px; left: -10px; overflow: hidden;
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top