Video html5 / css3

Navigation
0

I have an HD video (1920x818 approximately) on my site, I had help in a part of the solution since it was put 100%x100% . Now I would like to leave it fixed at the top of the page, I tried to use position:absolute; top:0; left:0; , it works but two black bars appear (top and bottom). How do I resolve this?

I would like a result similar to that of this site: link

Note that below the image / video at the top there is a menu, I would like to adapt this situation to my case.

What I have so far: 

 <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;

}
    
asked by anonymous 09.04.2015 / 13:19

3 answers

1

Hello, see if this example I set up helps you? 

#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>

With this, the video occupies your entire #video div, which will always have a height proportional to the size of the video you passed, that is. This will not show the black bands.

ps. I changed the video for an IMG, because I had no video to test, but I believe the behavior will be the same.

Hug.

    
09.04.2015 / 16:48
0

Friend, the example site you've shown is based on wordpress , so it's probably some plugin ready to mount this video and menu issue.

But here's a way to get started: 

<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;/*ALTURADOSEUMENU*/background:#666;margin-top:-100px;/*ALTURADOSEUMENU*/}</style><body><divid="video">
         {ADD SEU VIDEO AQUI}
      </div>

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

It's worth noting that I'm using jQuery because you can not set a height 100% for a div fault, it can not detect the height of the browser just as it does the width, so jQuery helps us with this.

I hope I have helped.

    
09.04.2015 / 14:34
0
video {
  width: 100%    !important;
  height: auto   !important;
}
    
09.04.2015 / 15:39
String for HTML Google Map disappeared