如何复制

使用

CSS 方法

单独使用 CSS，您可以创建完美的封面模拟对于不依赖脚本的视频。诀窍在于精确计算视频相对于父元素的宽高比的宽度和高度。例如，如果您的视频的宽高比为 16:9：

.parent-element-to-video {
  overflow: hidden;
}
video {
  height: 100%;
  width: 177.77777778vh; /* 100 * 16 / 9 */
  min-width: 100%;
  min-height: 56.25vw; /* 100 * 9 / 16 */
}

使视频居中

如果您还需要使视频居中，以下CSS将提供可靠的方法：

/* merge with above CSS */
.parent-element-to-video {
  position: relative; /* or absolute or fixed */
}
video {
  position: absolute;
  left: 50%; /* % of surrounding element */
  top: 50%;
  transform: translate(-50%, -50%); /* % of current element */
}

兼容性注意事项

虽然此解决方案在兼容 CSS3 的浏览器中完美运行，但较旧的浏览器可能需要基于脚本的方法才能实现所需的结果。