我想使用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/左右它似乎也编辑了你的问题与一个片段 –