具有固定高度和调整宽度的 HTML 视频，不会丢失部分

如何解决具有固定高度和调整宽度的 HTML 视频，不会丢失部分

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

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

解决方法

尝试添加高度和 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>

,

我最近开始使用 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;
}