Solution 1 :

You are on the right path but I think you are wondering why the video takes up the full screen/viewport. In your example you didn’t give the .video-container a parent div and specify a size:

.parent {
  width: 500px;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}

.video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
<div class="parent">
      <div class="video-container">
        <video controls class="video">
          <source src="/text.mp4" type="video/mp4" />
        </video>
      </div>
    </div>

Problem :

Am trying to build a simple html video player with a 16/9 aspect ratio

<div class="video-container">
        <video  controls class="video">
            <source src="/text.mp4" type="video/mp4" />
        </video>
</div>

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}

.video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

but so far it does not work, the video’s height is always more than the viewport and hence vertical scroll bars.

Comments

Comment posted by codesandbox.io/s/stack-overflow-video-aspect-ratio-h2u91

Looks like that works for me:

Comment posted by Ekwue chibuzo

That works fine but I wanted a situation where the videos height and width is always the inner height and width of the browser. When I set my src to a 16/9 video I always have a vertical scroll bar

By

Leave a Reply

Your email address will not be published. Required fields are marked *