时间戳

首页 > 解决方案 > Html 视频长宽比

html - Html 视频长宽比

问题描述

我正在尝试构建一个具有 16/9 纵横比的简单 html 视频播放器

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

但到目前为止它不起作用，视频的高度总是大于视口，因此垂直滚动条。

标签： htmlcssvideoaspect-ratio

解决方案

您走在正确的道路上，但我想您想知道为什么视频会占据全屏/视口。在您的示例中，您没有为 .video-container 提供父 div 并指定大小：

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

推荐阅读