我试图让我的 iframe 响应，但我无法获得适合电视边框的高度

Question

我制作了这个 iframe 以便我可以将电视边框放在视频播放器上，到目前为止我一直在努力让它在移动设备上看起来不错，到目前为止它在 PC 浏览器上看起来不错（jsbin 显示它很奇怪，但在实际中 site 看起来不错），但我无法调整视频的高度。

<html>
  <style>
    
    iframe {
      position: absolute;
      z-index: -1;
      left: 12%;
      top: 34%;
      width: 60%;
    }
    
    #TVborder {
      position: absolute;
      float: center;
      z-index: 0;
      left: 0px;
      width: 100%;
      pointer-events: none;
      }
      
  </style>
</head>
<body>
<img src="https://pngimg.com/uploads/tv/tv_PNG39278.png" width="100%" id="TVborder" />
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/Id3tNsMj_hA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>

您认为修复它的最佳方法是什么？

Answer 1

我通过在 iframe 周围添加一个容器并稍微调整一下来修复它，下面是代码的输出方式：

<html>
  <style>
    
    iframe {
      position: absolute;
      z-index: -1;
      width: 100%;
    }
    
    #TVborder {
      position: absolute;
      float: center;
      z-index: 0;
      left: 0px;
      width: 100%;
      pointer-events: none;
      }
      
   .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0%;
    height: 0;
    overflow: hidden;
}
   .embed-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
      
  </style>
</head>
<body>
<div class="embed-container">
<img src="https://pngimg.com/uploads/tv/tv_PNG39278.png" width="100%" id="TVborder" />
<iframe src="https://player.vimeo.com/video/622576121?h=92d4a4e5c6&amp;autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" style="position:absolute;top:20%;left:9%;width:66%;height:79%;" frameborder="0"></iframe>
</div>
</body>
</html>

我试图让我的 iframe 响应，但我无法获得适合电视边框的高度

I'm trying to make my iframe responsive, but I cant get the height to fit the TV border

html

css

responsive