iframe 上的 youtube 高度和宽度不起作用

Question

所以我按照这个视频教程让我的 iframe 视频响应移动设备或任何其他设备

https://www.youtube.com/watch?v=X4t0JxiBeO0

他们说要将此添加到 iframe 代码中

<div class="iframe-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe></div>

这样做后，他们说要添加以下代码

.iframe-container {
max-width: 100%;
height: 0;
margin-top: 60px;
padding-bottom: 56.25%;
position: relative;
}

.iframe-container iframe {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
width: 100%;
height: 100%;
}

现在我唯一的问题是 iframe html 代码中的宽度和高度似乎不起作用，它覆盖了 100% 的宽度，并且没有使用我分配给它的宽度和高度，但它是反应灵敏，但我希望它更小而不是那么大

现在我已经尝试了所有方法，例如增加和减少填充底部以及所有这些，但它似乎不起作用。有解决办法吗？

Answer 1

抱歉之前的回答。

我会通过添加第二个容器来做到这一点。

<div class="iframe-container">

   <div class="iframe-container-2">
      <iframe src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0"
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
   </div>

</div>

.iframe-container {
   width: 500px;
}

.iframe-container-2 {
   position: relative;
   width: 100%;
   height: 0;
   padding-bottom: 56.25%;
}

iframe {
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
}