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>

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.