如何修复iframe高度无法适配电视边框实现移动端响应式的问题

问题根因 #

原代码中iframe仅设置了宽度百分比，未强制指定与电视边框屏幕区域匹配的宽高比，移动端视口尺寸变化时，iframe高度按默认规则计算，无法与等比缩放的电视边框屏幕区域对齐。同时原代码存在无效属性float: center、HTML结构缺<head>标签、父容器未设置定位规则的问题，也可能引发布局错位。

最优解决方案 #

使用CSS aspect-ratio属性强制iframe与YouTube视频的16:9标准比例保持一致，高度会自动根据宽度计算，全端均可保持比例统一，同时补充基础布局规则修正原有问题。
修正后完整代码如下：

<html>
<head>
  <style>
    body {
      margin: 0;
      position: relative;
    }
    iframe {
      position: absolute;
      z-index: -1;
      left: 12%;
      top: 34%;
      width: 76.3%;
      /* 强制16:9宽高比，高度自动适配宽度，无需手动设置height */
      aspect-ratio: 16/9;
      border: none;
    }
    #TVborder {
      position: relative;
      z-index: 0;
      width: 100%;
      pointer-events: none;
    }
  </style>
</head>
<body>
<img src="https://pngimg.com/uploads/tv/tv_PNG39278.png" width="100%" id="TVborder" alt="电视边框" />
<iframe src="https://www.youtube.com/embed/Id3tNsMj_hA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>

低版本兼容方案 #

如果需要兼容不支持aspect-ratio的旧版移动端浏览器，可以使用传统padding撑开容器的方案实现同等效果：

<html>
<head>
  <style>
    body {
      margin: 0;
      position: relative;
    }
    .video-wrapper {
      position: absolute;
      z-index: -1;
      left: 12%;
      top: 34%;
      width: 76.3%;
      /* padding-top百分比基于容器宽度计算，56.25%对应16:9比例 */
      padding-top: 56.25%;
    }
    .video-wrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
    #TVborder {
      position: relative;
      z-index: 0;
      width: 100%;
      pointer-events: none;
    }
  </style>
</head>
<body>
<img src="https://pngimg.com/uploads/tv/tv_PNG39278.png" width="100%" id="TVborder" alt="电视边框" />
<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/Id3tNsMj_hA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</body>
</html>

微调说明 #

代码中的left、top、width参数可根据实际显示效果微调，确保视频刚好嵌入电视屏幕区域即可。 #

内容的提问来源于stack exchange，提问作者Lucas Manuel Sylleros Saavedra