我使用下面的代码来显示 youtube 视频。我将其大小设置为 560 宽和 315 高。代码运行良好,但当我尝试调整窗口大小时,iframe/video 不会调整大小,而是出现滚动条。如何使 iframe 也调整大小以使其始终适合屏幕宽度?
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/a3ICNMQW7Ok?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</body>
最佳答案
Responsive With Device
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&showinfo=0"
frameborder="0" allowfullscreen scrolling="auto" class="video"></iframe>
</div>
</body>
关于HTML/CSS - Iframe 适配屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44912423/