具有固定高度和调整宽度且不丢失部分的 HTML 视频答案

【问题标题】：HTML video with fixed height and adjusted width without missing parts具有固定高度和调整宽度且不丢失部分的 HTML 视频
【发布时间】：2026-02-25 15:45:02
【问题描述】：

我实际上只能做相反的事情（固定宽度，但调整高度）。但无论我尝试什么，它都不会保留全部内容并会删减部分内容。

HTML：

    <div class="player" id="player">
      <video id="myVideo" class="player__video viewer" preload="none">
        <source src="video.mp4">
      </video>
    </div>

CSS：

.player {
  max-width: 70%;
  position: relative;
  overflow: hidden;
}

【问题讨论】：

标签： html css html5-video media-player

【解决方案1】：

尝试添加高度和display: inline-block; 和width: auto

.player {
  display: inline-block;
  height: 200px;
  width: auto;
  position: relative;
  overflow: hidden;
  background: dodgerblue;
}

<div class="player" id="player">
  <video id="myVideo" class="player__video viewer" preload="none">
        <source src="video.mp4">
      </video>
</div>

【讨论】：

感谢您的回复。实际上它仍然在下面剪切了一段视频。我想确保在固定高度上显示完整的镜头，宽度也会相应调整。
@Stanyko height: 200px 是例如。您是否设置了实际视频所需的高度？
是的，没关系。我需要根据设定的高度调整宽度。
@Stanyko 宽度在这种情况下应该是自动的，即与内容一样宽

【解决方案2】：

我最近开始使用 CSS 和 HTML（比如 2 天前）。但这似乎有效，不确定是否是您的意思。

<div>
      <video id="myVideo" class="player_video_viewer" controls>
        <source src="video.mp4" type="video/mp4">
      </video>
</div>

.player_video_viewer {
  max-width: 70%; /*or "width"*/
  position: relative;
  overflow: hidden;
  height: 100px;
}

【讨论】：

感谢您的建议，但这并不能提供预期的结果。