Comentário: Quando codifiquei o tema Elemin (um site responsivo que eu projetei recentemente), um dos pulos de quadros que encontrei foi como tornar os vídeos incorporados mais flexíveis em alterações de tamanho; Através de horas pesquisando dados e experimentos, finalmente encontrei uma solução
Quando codifiquei o tema Elemin (um site responsivo que eu projetei recentemente), um dos pulos de quadros que encontrei foi como tornar os vídeos incorporados mais flexíveis em alterações de tamanho. Usando a largura máxima: 100% e a altura: o automóvel pode fazer com que a tag de vídeo HTML5 funcione bem, mas essa solução não funciona com o código embutido para tags iframe ou objeto. Após várias horas pesquisando dados e experimentos, finalmente encontrei uma solução. Essa técnica CSS é útil quando você está fazendo um design responsivo.
Tag de vídeo html5 flexível
Usando o vídeo do HTML5, você pode torná-lo flexível definindo o máximo de largura: 100%. Na introdução anterior, foi mencionado que não é aplicável a IFRames e códigos incorporados comumente usados em objetos.
vídeo {
MAX-LUDA: 100%;
Altura: Auto;
}
Objeto flexível e vídeos incorporados iframe
Esse truque é bastante simples, você precisa adicionar um contêiner <div> ao vídeo e definir o valor da propriedade do fundo de preenchimento da div entre 50% e 60%. Em seguida, defina a largura e a altura do elemento filho (ifame ou objeto) como 100%e use o posicionamento absoluto. Isso força o objeto incorporado a expandir automaticamente para o máximo.
CSS
.Video-container {
Posição: relativa;
Botting-Bottom: 56,25%;
Top-top: 30px;
altura: 0;
estouro: oculto;
}
.Video-container iframe,
.Video-container objeto,
.Video-container incorporado {
Posição: Absoluto;
topo: 0;
Esquerda: 0;
largura: 100%;
Altura: 100%;
}
Html
<div>
)
</div>
Alcançar flexibilidade em largura fixa
Se a largura do vídeo for limitada, precisamos de um contêiner extra para envolver o vídeo e definir uma largura fixa e max-largura: 100% para o div.
CSS
.video-wrapper {
Largura: 600px;
MAX-LUDA: 100%;
}
Html
<div>
<div>
)
</div>
<!- /vídeo->
</div>
<!- /Video-wrapper->
compatibilidade
Este truque suporta todos os navegadores, incluindo: Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone e iPad.