所以我在我的 website 中使用了 iFrame显示视频,我把它放在一个 div 中,以允许在移动平台上调整大小并使其响应更快等。但是现在,如果显示器很小,iframe 下面的内容会被截断。
这是 iframe 的代码:
<div class="wrapper">
<iframe src="https://player.vimeo.com/video/132695239?badge=0" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<style>
.wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
如果有人能看到任何可能导致这种行为的东西,那么我很想知道。
谢谢
编辑: 这是我要缩放的 div 的代码。宽度不会随着页面缩小而改变,因此高度也不会改变。 有什么想法吗?
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
最佳答案
问题是您的包装器 div .splash-page .main-wrap
设置为 position: absolute;
和 overflow-y: hidden;
这不允许 div 增长以适应您的所有内容。
如果您更改 CSS 以包含如下内容:
.splash-page .main-wrap {
overflow-y: visible;
position: relative;
}
它将允许 div 增长以容纳您的所有内容。
如果您只想定位特定宽度,您也可以将整个内容包装在媒体查询中。
@media all and (min-width: 1001px) {
...
}
目前您还会遇到重复背景问题,因为您在 div 和 body 标签上都使用了 .wsite-background
。如果从 body 标签中删除此类,它应该看起来更好。
关于html - 缩放 iframe 以适本地适应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31383315/