如何複製

使用

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 的瀏覽器中完美運行，但較舊的瀏覽器可能需要基於腳本的方法才能實現所需的結果。