Video does not get 100% height and width correctly

Asked

Viewed 739 times

2

I have a problem in my tag 'cause I wanted to leave her with a width:100% and the height:100%; but without losing my video quality it would have to look like that website here opened some topics related to this subject that was solved in parts because I managed to leavelo with the width and height 100% but the video stretched and lost its quality currently my video this as I want to put the values I adjust manually and as I am starting to use media queries I am having many difficulties to be able to adapt this in different resolutions follow the code of my video:

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

As you can see here in this code snippet it’s 100% high and wide but it’s only this high because I’ve been adjusting in the CSS in tag transform:scale(1.72); however this method and wrong it would have to adjust automatically because if put on a very small screen soon will not fit properly

this and the print as it is working but it is not the correct way to do :

inserir a descrição da imagem aqui

html5 css3

  • If you leave the video with 100% height and width you will continue to see the distorted video, because the dimensions of the browser can change according to the size of the user screen, and are not the same as the youtube player. I advise you to capture the height of the browser via Javascript to put in the video, and leave the width variable, so you have the video "fullscreen" and without being distorted. (If you want to add a reply to how to do)

1 answer

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>

  • friend ran his codido =3 however as he is with position:Fixed he scrolls down the page and overlay my items wanted a video as in the post la link

  • 1

    puts the video tag at the end

  • Voce says put it at the end of my page

  • 1

    yes puts her at the end of the body she has to be the last tag

  • worked out friend

  • could simulate an excerpt there with some friendly content

Show 1 more comment

Browser other questions tagged html5 css3

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