HTML/CSS - iframe 适合屏幕

【问题标题】：HTML/CSS - Iframe fit screenHTML/CSS - iframe 适合屏幕
【发布时间】：2017-12-08 07:22:45
【问题描述】：

我使用下面的代码来显示一个 youtube 视频。我将其尺寸设置为 560 宽和 315 高。代码效果很好，但是当我尝试调整窗口大小时，iframe/video 不会调整大小，而是出现滚动条。如何使 iframe 也调整大小，使其始终适合屏幕的宽度？

<body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/a3ICNMQW7Ok?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</body>

【问题讨论】：

Full-screen iframe with a height of 100%的可能重复

标签： html css iframe

【解决方案1】：

响应式设备iframe

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<body>

<div class="container">
<iframe src="https://www.youtube.com/embed/a3ICNMQW7Ok?rel=0&amp;showinfo=0" 
frameborder="0" allowfullscreen  scrolling="auto" class="video"></iframe>
</div>

</body>

【讨论】：

【解决方案2】：

给定的宽度和高度是固定大小。如果你以 70%、80% 的百分比给出它们，它应该随窗口调整大小

 <body>
        <iframe width="100%" height="500px" src="https://www.youtube.com/embed/a3ICNMQW7Ok?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
    </body>

【讨论】：