css video 宽高自适应

要让 CSS 视频宽高自适应，可以采用以下方法：

1. 使用 max-width 和 max-height 属性来设置视频容器的最大宽度和最大高度，这样视频就不会超出容器的范围。

.video-container {
  max-width: 100%;
  max-height: 100%;
}

2. 使用 padding-top 属性来设置视频容器的高度，然后使用 position 和 top 属性来将视频居中，这样视频就可以根据容器大小自适应宽度。

.video-container {
  position: relative;
  padding-top: 56.25%;
}

.video-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}

以上两种方法都可以实现 CSS 视频宽高自适应，具体使用哪种方法可以根据实际情况选择。

相关问题

video自适应宽高比

视频自适应宽高比是指在不同尺寸的屏幕上播放视频时，保持视频的宽高比不变，以适应不同尺寸的设备屏幕，同时不会出现图像拉伸或者畸变的情况。实现视频自适应宽高比的方法有多种，其中一种常见的方法是通过CSS样式来控制视频容器的宽高比，具体实现方式为设置视频容器的padding-bottom属性值为百分比数值，该百分比数值即为视频的宽高比，然后将视频设置为绝对定位，并且设置宽度和高度均为100%。这样，在不同尺寸的屏幕上播放视频时，视频容器的高度会根据屏幕宽度自适应缩放，从而保持视频的宽高比不变。

如何设置videojs的长高自适应

要使用 videojs 实现视频的长高自适应，可以通过下面的步骤来实现：

1. 在 HTML 中设置 video 标签，并设置其宽度为 100%：

<video id="my-video" class="video-js" controls preload="auto" width="100%"
  poster="poster.jpg" data-setup="{}">
  <source src="my-video.mp4" type='video/mp4'>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  </p>
</video>

2. 使用 CSS 来设置 video 元素的高度，可以使用 `padding-top` 或 `padding-bottom` 的百分比来实现自适应高度，同时设置 `position: relative`：

.video-js {
  position: relative;
  padding-top: 56.25%;
  /* 16:9 比例的视频 */
}

3. 在 JavaScript 中初始化 videojs：

var player = videojs('my-video');

经过上述步骤，视频就可以实现长高自适应了。这种方法可以使得视频在不同尺寸的屏幕上自适应，同时保持视频的比例不变。