Question

我正在尝试使用iframe嵌入视频，但我得到一些令人讨厌的溢出填充，我似乎无法摆脱它。

顶部的代码是一种强制iframe进入响应式的方式，以便您可以在移动设备上查看。

基本上'padding-bottom'代码控制着帧的宽高比。

我从这里得到了代码：

https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

我在这里查了一下：Making responsive iframe这也让我感到非常可怕。

结果如下：

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    padding-right: 0px;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
}
</style>

<div class="video-container">
    <iframe scrolling="no" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" frameBorder="0"></iframe>
</div>

将padding-bottom：更改为56.35％只会将黑色溢出线移动到视频的底部而不是侧面。

Answer 1

高度100vh将占据视口的100％，margin:0和padding:0将删除默认属性。

添加

.video-container {
    position: relative;
} 

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%; /* Add this */
    height: 100vh; /* Add this */
    padding:0px; /* Add this */
    margin:0px; /* Add this */
}

.video-container {
    position: relative;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100vh;
    padding:0px;
    margin:0px;
}

<div class="video-container">
    <iframe scrolling="no" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" frameBorder="0"></iframe>
</div>

Answer 2

我只是这样做了。它有效 - 绕过Chrome使用的用户代理样式表并应用正确的样式。

<style type="text/css">
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    padding-right: 0px;
    height: 0;
    border: 0;
    overflow: hidden;
}
</style>

<div class="video-container">
    <video style="width:100%;" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" controls autoplay type="video/mp4"></video>
</div>

Answer 3

    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    padding-right: 0px;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
}
</style>

<div class="video-container">
    <iframe scrolling="no" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" frameBorder="0"></iframe>
</div>

响应iframe，如何删除溢出边框

3 个答案: