HTML/CSS - Iframe 适配屏幕

标签 html css iframe

我使用下面的代码来显示 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>

最佳答案

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&amp;showinfo=0" 
frameborder="0" allowfullscreen  scrolling="auto" class="video"></iframe>
</div>

</body>

关于HTML/CSS - Iframe 适配屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44912423/

相关文章:

javascript - CSS:如果表头悬停,如何在表的每个单元格上触发悬停?

java - 无法切换到 Selenium 中的框架,并在下面的描述中给出了详细信息

javascript - 更改可见性不会立即隐藏 iFrame

javascript - JS - 从动态添加的元素中获取点击事件的值

javascript - 如何在没有扩展名的URL上触发文件下载

html - 如何根据是否正在输入文本区域来更改文本区域的属性

CSS - 使用媒体查询将 div 的显示从网格更改为 flexbox

html - 如何使绝对定位的 div 占用所有可用的宽度空间?

html - div 选项卡切换器中的图像并非全部 float 在 firefox 上

javascript - iframe 内的 Google Analytics