2

Estou chamando um vídeo em uma div pai com a seguinte definição:

div {
    width: 100%;
    height: 400px;
}

E como elemento filho a tag <video> com:

video {
    height: 400px;
    width: 100%;
    object-fit: cover;
    background-color: #000;
}

No Firefox Developer Edition funciona normalmente, tanto o crop do object-fit quanto a altura de 400px mas no Chrome não. Ou o vídeo fica muito mais alto do que deveria ou em tela cheia (se eu usar vh como unidade).

Print: chrome x firefox html5 video e object-fit

1 Resposta 1

1

O que acontece é que o seu vídeo está extrapolando a medida do container. Uma forma para resolver isso é colocando overflow:hidden no container

Imagem feita no Chrome! (vr. 71)

inserir a descrição da imagem aqui

Codigo da imagem acima:

div {
    width: 100%;
    height: 400px;
    overflow: hidden;
}

video {
    height: 400px;
    width: 100%;
    object-fit: cover;
    background-color: #000;
}
<div>
    <video controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>
</div>
    

1
  • 1
    Funcionou perfeitamente, obrigado!
    – Luan
    17/12/2018 às 12:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .