0

Gente gostaria de saber como faço para deixar um video 100% da tela com altura fixa sem que ele fique menor igual a imagem abaixo inserir a descrição da imagem aqui

A ideia é que o vídeo ocupe todo esse espaço em cinza claro se eu deixo o video sem uma altura fica ele fica 100% da tela porem fica com a altura muito grande e se uso um tamanho fixo igual o da imagem ele fica da altura certa do container mais não fica com a largura 100% preenchida segue um pedaço do meu código

<video src="http://localhost/trustech/image/catalog/video-academia.mp4" muted="true" autoplay="true" loop="true" style="width: 100%; height: 500px;">
  Your browser does not support the video tag.
</video>
2
  • 1
    Esse português ai está complicando o entendimento. Veja se é isso kithomepage.com/sos/video100.htm
    – user60252
    Commented 12/08/2017 às 17:28
  • e mais ou menos a ideia amigo e que meu video fique na quela sessão toda como mostra na imagem acima so que assim se uso width:100%; ele fica enorme o video deixando a sessão completamente grande agora se uso width:100; com uma altura de height: 550px; ele fica no tamanho correto da minha sessão mais ele acaba não ocupando toda aquela sessão sei que é dificil de explicar assim mais consegue entender agora ? Commented 14/08/2017 às 13:13

2 Respostas 2

-1

usando css

video {
  position: fixed; /*  absolute ou fixed */
  width: 100%;
  z-index: 20;
  height: 100%;
  left: 0px;
  top: 0px;
}

ou style

  <video style="position: fixed; /*  absolute ou fixed */width: 100%;z-index: 20;height: 100%;left: 0px;top: 0px;" src="http://localhost/trustech/image/catalog/video-academia.mp4" muted="true" autoplay="true" loop="true" style="width: 100%; height: 500px;">

Your browser does not support the video tag.

1
  • Penso que ele não quer que o vídeo acompanhe o scroll, mas que tenha uma altura fixe, pergunta um pouco confusa. Commented 6/10/2017 às 14:33
-2

Olá. Você pode usar isso:

body{
            background-color: red;
            overflow: hidden;
        }
        video{
            position: absolute;
            width: 100%;
            height: 100%;
        }
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>
</body>
</html>

1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 1/07/2022 às 3:30

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 .