Design de página web responsiva - Vídeo

Usar a propriedade width

Se width A propriedade definida como 100%, o player de vídeo será responsivo e ampliará e diminuirá:

Exemplo

video {
  width: 100%;
  height: auto;
}

Experimente você mesmo

Observe que, no exemplo acima, o player de vídeo pode ser ampliado para um tamanho maior que o original. Em muitos casos, uma solução melhor é usar a propriedade max-width.

Usar a propriedade max-width

Se o max-width A propriedade definida como 100%, o player de vídeo será redimensionado proporcionalmente, mas nunca será ampliado para um tamanho maior que o original:

Exemplo

video {
  max-width: 100%;
  height: auto;
}

Experimente você mesmo

Adicionar vídeo à página de exemplo

Nós gostaríamos de adicionar um vídeo à nossa página de exemplo. O vídeo será ajustado para ocupar todo o espaço disponível sempre:

Exemplo

video {
  width: 100%;
  height: auto;
}

Experimente você mesmo