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

问题描述：

我想使用iframe嵌入视频，但我得到一些恼人的溢出填充，我似乎无法摆脱。响应iframe，如何删除溢出边框

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

基本上'填充底部'代码是控制帧的高宽比。

我得到了代码从这里：

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

我在这里检查：Making responsive iframe，这给我留下了可怕的溢出了。

结果如下：

Image displaying overflow issue

.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>

改变填充底：至56.35％只是移动黑溢流管线到视频的底部，而不是旁边。

图像不工作，所以它在这里举行：HTTPS：//ibb.co/cH3Q8Q – Kieran

它做 - 它只是新的用户不能内嵌图片。一旦你有10个代表，你将能够。 –

我创建了一个小提琴。一切工作正常... https://jsfiddle.net/8uL0jw3j/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>

答

我只是做这个代替。它的工作原理 - 获取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>

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

相关推荐