Video Html5/css3

Asked

Viewed 450 times

0

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

I would like a result similar to that site: http://www.popupdesign.com.br/

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

}
html css video

  • Could add html code?

  • 1

    @Felipeavelar, edited and already appears his code.. for some reason the bold "ate" html.

3 answers

1

Hello, see if this example I’ve made 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 all your div #video, which will always have a height proportional to the size of the video you spent, ie. So the black stripes won’t appear.

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

Hug.

0

Friend, the sample site you showed is made based on wordpress, then probably be some plugin ready that mounts this issue of video and menu.

But here’s a way to start:

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

It’s worth noting that I’m using the jQuery because there is no way to set a height 100% for a div loose, it cannot detect the height of the browser just as it does with the width, so the jQuery help us in this matter.

I hope I’ve helped.

0

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

Browser other questions tagged html css video

You are not signed in. Login or sign up in order to post.