Como se livrar de espaço em branco ao redor de um <embed> elemento?

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

  •  23-08-2019
  •  | 
  •  

Pergunta

RESUMO:uma incorporar com 100% de largura e altura empurra seus pais o tamanho para ser 100% de largura e altura do avô.Como faço para obter o elemento embed para recolher todo o espaço em branco em torno dele para que ele se ajuste a largura e a altura do seu pai perfeitamente?

Eu tenho uma página com uma imagem, que ao ser clicado é substituída por incorporar um elemento que desempenha um filme do quicktime.

O problema é que o filme incorporado tem uma grande quantidade de espaço em branco em torno dele.

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

O vídeo é do desconhecido tamanho então, como fazer para me livrar desse espaço em branco deixando de altura e largura em 100%?

EDITAR:Apesar de não mostrar, que eu sou realmente limpar o estofamento e as margens.O espaço em branco que ainda permanece.

EDIT 2:O espaço em branco em questão é entre o filme e a borda preta, não é a preto e a borda do navegador.

Foi útil?

Solução 7

verifica-se que não há nenhuma maneira de fazer isso além de fazer a escala do filme para o tamanho do pai usando scale="aspect".

Apesar de não ser a solução perfeita, ele terá que fazer por agora.

Outras dicas

Você está limpando a margem navegador padrão e preenchimento? Caso contrário, você precisa fazer isso.

A maioria das pessoas usar estilos CSS reset para a margem normalize e estofamento em todos os navegadores. Uma boa forma de uso é Eric Meyer: Reset CSS

EDIT: Para remover o espaço debaixo da incorporação, exibição set: bloco na incorporação. Veja: http://media.nodnod.net/embed.html

WOOHOO,
Eu procurei um tempo muito longo para esta resposta e finalmente encontrei!
Você vai ter que colocar o elemento embed em um elemento de objeto que está em um iframe ou um quadro:
O iframe da página

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


o iframe de origem

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

Certifique-se de que a altura e a largura do valor em iframe, objeto e elemento embed o mesmo.

Eu não estou familiarizado com elementos incorporar, mas parece-me que quando você definir a largura a 100%, você configurá-lo para a largura do elemento pai, que é uma div neste caso e um div ocupa todo largura disponível, pois é um elemento de bloco.

Então você pode flutuar a div circundante ou exibi-lo em linha para ter seu tamanho ajustar ao conteúdo em vez do espaço disponível em torno dele.

Tente configurar float: left tanto no div e o elemento incorporado como esta. Que irá remover o espaço em branco extra. 

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

É um corte feio, mas você poderia usar uma tabela: 

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

Você usou um inspetor de DOM para verificar o espaço em branco não é parte da incorporação?

Além disso, você pode colocá-lo em um painel / div / etc e mexer com o css: 

position: relative; top: -10px; left: -10px; overflow: hidden;
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top