我通过iFrame API嵌入了YouTube视频。 视频本身是方形的,它的宽度和高度取决于容器的大小(也是方形,具有流体尺寸) - 我正在使用CSS来实现这一点。
一切都或多或少都有效,但在视频的开头和结尾(开始前和停止后),内容显示宽度减小,显示黑边栏:
知道为什么会发生这种情况或该怎么办?是否有人在响应式布局的背景下制作了具有不规则形状的视频?
更新
似乎将宽度和高度设置为101%会有所帮助。但不确定如何保持一致。
答案 0 :(得分:0)
<div class="video_iframe_wr">
<iframe/>
</div>
.video_iframe_wr {
height: 0;
padding-bottom: 100%; /* that makes height = width */
position: relative;
}
.video_iframe_wr > iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width:100%;
height:100%;
}