如何使视频的宽度为 100% 或高度为 100%

Question

我遇到了与this, 相同的问题，但我正在尝试在<video/> 元素上解决此问题。 我想制作视频元素，有时是width: 100%，有时是height: 100%，按它的纵横比。

这是我的CSS

.remoteVideo-container {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  text-align: center;
  background-color: rgb(45, 48, 53);
}

.remoteVideo {
  object-fit: contain;
  transform: scale(-1, 1);
}

这是我的 jsx

      <div className="remoteVideo-container">
          <video
            className="remoteVideo"
            autoPlay
            ref={this.remoteVideo}
            muted
          ></video>
      </div>

结果：

Answer 1

你几乎明白了，你错过了视频标签的大小。对象位置也很方便：

.remoteVideo {
  height:100%; /* or is max-height:100%; */
  width:100%;  /* or is max-width:100%;  */
  object-fit: contain;
  object-position:center;
  transform: scale(-1, 1);
}

在整页中运行以测试调整大小的行为的可能示例，或基于max-height/max-width100%https://codepen.io/gc-nomade/pen/bGNzzNj 的版本以在视频变得大于屏幕时缩小视频。由您选择值高度和宽度。

body {
  margin: 0;
}

.remoteVideo-container {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  text-align: center;
  background-color: rgb(45, 48, 53);
}

.remoteVideo {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(-1, 1);
}

<div class="remoteVideo-container">
  <video class="remoteVideo" autoplay muted poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg">
    <source  src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm" />
    <source  src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4" />
  </video>
</div>

Answer 2

我可以通过一个小的 css hack 来做到这一点。 将 min-width 和 min-height 设置为 100%，然后将 height 和 width 设置为 auto 以防止视频拉伸或缩放。 还有一点让视频居中。

.remoteVideo {
  min-width: 100%; 
  min-height: 100%; 
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}