如何让YouTube iframe在所有屏幕上保持16:9固定宽高比？

问题说明 #

需要实现YouTube iframe在任意设备上维持16:9宽高比，当屏幕宽度≤720px时，iframe宽度设为100%，高度自动适配比例。尝试设置height:auto和padding方法均未生效，原代码如下：

原CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #7AE7C7;
  text-align: center;
}

nav{
  background-color: #0b4e2d;
  font-size:18px;
  padding:6px;
  margin: 0;
  width: 100%;
}

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  position: relative;
  color: white;
  margin-left: 15px;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

ul a {
  color: white;
  text-decoration: none;
}

ul a:hover {
  text-decoration: underline;
}

iframe{
  display: block;
  margin: 25px auto;
  border: 5px solid white;
  border-radius: 15px;
  background-color: white;
}

h1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 56px;
  text-align: center;
}

h2 {
    font-family: 'Open Sans', sans-serif;
  text-align: center;
}

h3 {
    font-family: Helvetica, sans-serif;
    font-size: 24px;
  text-align: center;
    font-weight: 10;
}

/* Mobile devices */
@media screen and (max-width: 720px) {
iframe{
  width: 100%;
  height: auto;
}
}

原HTML代码 #

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

<head>
    <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link href="https://grocerystorerblx.github.io/style.css" rel="stylesheet" type="text/css" />

</head>

<body>
  <nav>
    <ul>
      <li><a href="https://grocerystorerblx.github.io/">Home</a></li>
      <!-- <li><a href="">Fan Art</a></li> !-->
      <li><a href="https://grocerystorerblx.github.io/devlog">Dev Log</a></li>
      <li><a href="https://grocerystorerblx.github.io/credits">Credits</a></li>
      
    </ul>
  </nav>

  <iframe width="720" height="405" src="https://www.youtube.com/embed/OfDQD1vwsc4?si=hYtyXVJaSg7q_fpz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<h2>Countdown to Grocery Store 2's Release Date</h2>
<script src="https://grocerystorerblx.github.io/script.js"></script>
<h3 id="countdown"></h3>
</body>

</html>

解决方案 #

核心是通过容器包裹iframe，利用padding百分比特性实现16:9比例，同时移除iframe标签上的固定宽高属性，避免优先级冲突。

修改后的CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #7AE7C7;
  text-align: center;
}

nav{
  background-color: #0b4e2d;
  font-size:18px;
  padding:6px;
  margin: 0;
  width: 100%;
}

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  position: relative;
  color: white;
  margin-left: 15px;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

ul a {
  color: white;
  text-decoration: none;
}

ul a:hover {
  text-decoration: underline;
}

/* 新增iframe容器样式 */
.video-container {
  position: relative;
  width: 720px;
  max-width: 100%;
  margin: 25px auto;
  /* 16:9比例：9/16 = 56.25% */
  padding-top: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 5px solid white;
  border-radius: 15px;
  background-color: white;
}

h1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 56px;
  text-align: center;
}

h2 {
    font-family: 'Open Sans', sans-serif;
  text-align: center;
}

h3 {
    font-family: Helvetica, sans-serif;
    font-size: 24px;
  text-align: center;
    font-weight: 10;
}

修改后的HTML代码 #

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

<head>
    <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link href="https://grocerystorerblx.github.io/style.css" rel="stylesheet" type="text/css" />

</head>

<body>
  <nav>
    <ul>
      <li><a href="https://grocerystorerblx.github.io/">Home</a></li>
      <!-- <li><a href="">Fan Art</a></li> !-->
      <li><a href="https://grocerystorerblx.github.io/devlog">Dev Log</a></li>
      <li><a href="https://grocerystorerblx.github.io/credits">Credits</a></li>
      
    </ul>
  </nav>

  <!-- 用容器包裹iframe，移除原width和height属性 -->
  <div class="video-container">
    <iframe src="https://www.youtube.com/embed/OfDQD1vwsc4?si=hYtyXVJaSg7q_fpz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  </div>
  
<h2>Countdown to Grocery Store 2's Release Date</h2>
<script src="https://grocerystorerblx.github.io/script.js"></script>
<h3 id="countdown"></h3>
</body>

</html>

原理说明 #

1. 容器的padding-top: 56.25%：CSS中padding的百分比基于父元素宽度计算，9/16=56.25%，为容器创建16:9的固定比例空间。
2. iframe绝对定位：将iframe设置为绝对定位，覆盖整个容器，宽高自动匹配容器比例，无需手动设置height。
3. 移除iframe固定宽高属性：原iframe标签的width和height属性优先级高于CSS的height:auto，必须移除才能让自适应生效。
4. 容器max-width:100%：确保屏幕宽度≤720px时，容器自动占满屏幕宽度，iframe随之自适应。

内容的提问来源于stack exchange，提问作者user19612400