0

Tenho um vídeo HD (1920x818 aproximadamente) em meu site, tive ajuda em uma parte da solução já que foi colocar 100%x100%.
Agora gostaria de deixar ele fixo no topo da página, tentei usar position:absolute; top:0; left:0;, funciona mas aparecem duas barras pretas (em cima e em baixo). Como resolvo isso?

Gostaria de um resultado parecido com o desse site: http://www.popupdesign.com.br/

Reparem que abaixo da imagem/vídeo no topo existe um menu, gostaria de adaptar essa situação ao meu caso.

O que tenho até agora:

 <div id="video">
      <video width="100%" height="100%" loop>
           <source src="video/animacao-lol.mp4" type="video/mp4" />
      </video>
 </div>
#video {
  width: 100%;
  height: 100%;
}

video {
  height: 99%;
  width: 100%;
   z-index: -100;
  background-color: #000;

}
2
  • Poderia adicionar o código html? Commented 9/04/2015 às 11:45
  • 1
    @FelipeAvelar, editei e já aparece o código dele.. por algum motivo o negrito "comeu" o html. Commented 9/04/2015 às 11:46

3 Respostas 3

1

Olá, veja se este exemplo que montei te ajuda?

#video {
  width: 100%;
  /* esta porcentagem é baseada na largura do video = 1980*100/818 */
  /* fazendo com que a altura do video seja relativo a largura de #video */
  /* assim nunca vai aparecer as bordas pretas */
  padding-top: 42.60%; 
  height: 0;
  position: relative;
}

/*troque por video*/
#video img {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  top: 0;
}
<header>Topo</header>
<nav>Talvez um menu</nav>

<div id="video">
  <img src="http://placehold.it/1920x818">
</div>

<section>outros elementos do site</section>

Com isto o video ocupa todo o seu div #video, que terá sempre uma altura proporcional ao tamanho do video que você passou, ou seja. Assim não ira aparecer as faixas pretas.

ps. Troquei o video por uma IMG, porque não tinha nenhum video para testar, mas acredito que o comportamento será o mesmo.

Abraço.

0
0

Amigo, o site de exemplo que você mostrou é feito com base wordpress, então provavelmente seja algum plugin pronto que monte essa questão do vídeo e do menu.

Mas, aqui vai uma forma de se iniciar:

<html>
   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <title>Exemplo</title>
   </head>
   <style>
      *{
         margin: 0;
         padding: 0;
      }
      #video{
         position: relative;
         width: 100%;
         overflow:hidden;
         background: #000;
      }
      #menu{
         position: relative;
         width: 100%;
         height: 100px; /*ALTURA DO SEU MENU*/
         background: #666;
         margin-top: -100px; /*ALTURA DO SEU MENU*/
      }
   </style>
   <body>
      <div id="video">
         {ADD SEU VIDEO AQUI}
      </div>

      <div id="menu">
      </div>
   </body>
   <script>
      $('#video').height( $(document).height() );
   </script>
</html>

Vale a observação que estou utilizando o jQuery pois não tem como setar uma altura 100% para uma div solta, ela não consegue detectar a altura do browser assim como faz com a largura, então o jQuery nos ajuda nessa questão.

Espero ter ajudado.

0
video {
  width: 100%    !important;
  height: auto   !important;
}

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 .