在youtube上禁用blackbars嵌入iFrame [英] disabling blackbars on youtube embed iFrame
问题描述
我将来自youtube的视频嵌入到我的网页中我想让它在屏幕上100%拉伸而没有黑条。虽然我给它的宽度为100%,但它仍然在视频的两侧有一些黑条。我该如何摆脱它?
I embed a video from youtube to my web page I want it to be stretch 100% on the screen with no blackbars. Although I give it a width of 100%, it still has some blackbars on the sides of the video. How can I get rid of it?
屏幕截图:
片段: 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;
}
还有另一个问题,但它基本上没有帮助我。
There's another question about this but it basically didn't help me.
推荐答案
您希望将视频绝对放置在一个包装器中,该包装器设置与视频宽高比相匹配的垂直填充。要获得填充/纵横比,请将视频的高度除以宽度并乘以100得到百分比。
You want to absolutely position the video within a wrapper that sets vertical padding that matches the video's aspect ratio. To get the padding/aspect ratio, divide the video's height by the width and multiply by 100 to get a percentage.
* {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>
这篇关于在youtube上禁用blackbars嵌入iFrame的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!