在youtube上禁用blackbars嵌入iFrame

Question

我将来自youtube的视频嵌入到我的网页中,我想让它在屏幕上100%拉伸,没有黑条.虽然我给它的宽度为100%,但它仍然在视频的两侧有一些黑条.我怎么能摆脱它？

截图: 摘录:https://jsfiddle.net/o3rp6an9/1/

<div id="video">
    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/zWAiQJvwb8Q?autoplay=1&loop=1&controls=0&rel=0&showinfo=0&playlist=zWAiQJvwb8Q&modestbranding=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

#video {
    height:100%;
    width:100% !important;
    background-size:100% 100%;
    position:relative;
    overflow:hidden;
}

还有另一个问题,但它基本上没有帮助我.

Answer 1

您希望将视频绝对定位在一个包装器中,该包装器设置与视频宽高比匹配的垂直填充.要获得填充/纵横比,请将视频的高度除以宽度,然后乘以100得到百分比.

* {padding:0;margin:0;box-sizing:border-box;}
#video {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
#video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

<div id="video">
		<iframe width="100%" height="100%" src="https://www.youtube.com/embed/zWAiQJvwb8Q?  autoplay=1&loop=1&controls=0&rel=0&showinfo=0&playlist=zWAiQJvwb8Q&modestbranding=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>