2

estou com um problema na minha tag vídeo pois queria deixa-lá com um width:100% e o height:100%; porem sem perder a minha qualidade do vídeo ele teria que ficar parecido com o desse site aqui abri alguns tópicos referente a esse assunto que foi resolvido em partes pois consegui deixa-lo com a largura e a altura 100% porem o vídeo esticava e perdia sua qualidade atualmente meu vídeo esta como eu quero porem os valores eu ajusto manualmente e como estou começando a usar media queries estou com muitas dificuldades para poder adaptar isso em diferentes resoluções segue o código do meu vídeo:

#video {
  width: 100%;
  height: 100%;
}
video {
  height: 100%;
  width: 100%;
  z-index: -100;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: scaley(1.72);
  -o-transform: scaley(1.72);
  -ms-transform: scaley(1.72);
  -moz-transform: scaley(1.72);
  transform: scaley(1.72);
}
<div id="video">
  <video id="Video1" width="100%" height="100%" loop>
    <source src="video/League-warrios.mp4" type="video/mp4" />
  </video>
</div>

Como podem ver aqui nesse trecho de código ele esta 100% de altura e de largura porem ele só esta com a altura porque fui ajustando no CSS na tag transform:scale(1.72); porem esse método e errado ele teria que se ajustar automaticamente pois se colocar em uma tela muito pequena logo não vai se ajustar corretamente

essa e a print da forma que esta funcionando porem não e a forma correta de se fazer :

inserir a descrição da imagem aqui

1
  • Se deixar o vídeo com altura e largura 100% vai continuar vendo o vídeo distorcido, pois as dimensões do browser podem mudar de acordo com o tamanho da tela do usuário, e não são as mesmas do player do youtube. Aconselho a captar a altura do browser via Javascript para por no vídeo, e deixar a largura variável, assim terá o vídeo "fullscreen" e sem estar distorcido. (Se quiser adiciono uma resposta de como fazer) 29/05/2015 às 20:48

1 Resposta 1

2
#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
}
<body>
   <!-- Todos os outros elementos devem ficar aqui para não sobrepor -->
   <video muted autoplay loop id="bgvid">
      <source src="video/League-warrios.mp4" type="video/mp4" />
   </video>
</body>
6
  • amigo funciou seu codido =3 porem como ele esta com position:fixed ele desce a pagina e sobreporem meus itens queria um video como no link la do post 29/05/2015 às 20:05
  • 1
    coloca a tag video no final
    – M8n
    29/05/2015 às 20:11
  • voce diz colocar ela no final da minha pagina 29/05/2015 às 20:15
  • 1
    sim coloca ela no final do body ela tem que ser a ultima tag
    – M8n
    29/05/2015 às 20:16
  • funcionou nao amigo 29/05/2015 às 20:41

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 .