在 youtube 上禁用黑条嵌入 iFrame [英] disabling blackbars on youtube embed iFrame

问题描述

我将来自 youtube 的视频嵌入到我的网页中，我希望它在屏幕上 100% 拉伸而没有黑条.虽然我给它设置了 100% 的宽度，但它仍然在视频的两侧有一些黑条.我怎样才能摆脱它?

屏幕截图:片段:https://jsfiddle.net/o3rp6an9/1/

<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>
#视频 {高度:100%；宽度:100%！重要；背景尺寸:100% 100%；位置:相对；溢出:隐藏；}

关于这个还有另一个问题，但它基本上没有帮助我.

解决方案

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

* {padding:0;margin:0;box-sizing:border-box;}#视频 {位置:相对；填充底部:56.25%；/* 16:9 */高度:0；}#video iframe {位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；}

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

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?

Screenshot: snippet: 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.

解决方案

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 上禁用黑条嵌入 iFrame的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！