Web Design Responsivo - Vídeos
Usando a propriedade largura
Se a width
propriedade estiver definida como 100%, o player de vídeo responderá e aumentará e diminuirá:
Exemplo
video {
width: 100%;
height: auto;
}
Observe que no exemplo acima, o player de vídeo pode ser dimensionado para ser maior do que seu tamanho original. Uma solução melhor, em muitos casos, será usar a
max-width
propriedade.
Usando a propriedade max-width
Se a max-width
propriedade estiver definida como 100%, o player de vídeo será reduzido se necessário, mas nunca será maior do que o tamanho original:
Exemplo
video {
max-width: 100%;
height: auto;
}
Adicionar um vídeo à página da Web de exemplo
Queremos adicionar um vídeo em nossa página da Web de exemplo. O vídeo será redimensionado para sempre ocupar todo o espaço disponível:
Exemplo
video {
width: 100%;
height: auto;
}