使用原生 CSS 实现自适应视频

2024-02-18 19:17:43

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  
  <style>
    video {
      width: 100%;
      height: 0;
      padding-bottom: 56.25%; /* 16:9 aspect ratio */
    }
  </style>
</head>

<body>
  <video controls>
    <source src="video.mp4" type="video/mp4" />
  </video>
</body>

</html>

使用原生 CSS 实现自适应视频

前言

在研究 CSS 数学函数时，曾考虑过响应式 iframe，也能找到一些现有的解决方案，例如这个，但是需要使用包装器或 JavaScript。假如没有包装器，只使用原生 CSS 能实现相同的功能吗？

首先，我们需要获取视频的宽高比。然而无法从属性中获取视频的宽高比（此方法存在于 CSS
Sizing 中），因此我们需要另一种方法来获取宽高比。

方法

一种方法是使用 CSS 数学函数 calc() 来计算宽高比。我们可以使用 padding-bottom 属性来设置视频的高度，并将值设置为视频宽度的 56.25%。这是因为 16:9 的宽高比是 1.7777777777777777，而 56.25% 是 0.5625，两者相乘得到 1。

video {
  width: 100%;
  height: 0;
  padding-bottom: calc(100% / 1.7777777777777777);
}

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  
  <style>
    video {
      width: 100%;
      height: 0;
      padding-bottom: calc(100% / 1.7777777777777777);
    }
  </style>
</head>

<body>
  <video controls>
    <source src="video.mp4" type="video/mp4" />
  </video>
</body>

</html>