【问题标题】:I want to remove the top and bottom black margin of youtube video我想删除 youtube 视频的顶部和底部黑色边距
【发布时间】:2018-06-28 08:27:48
【问题描述】:

我想要视频宽度=100% 和高度=500px(固定高度)。但我不想要 youtube 视频的顶部和底部黑色边距。我必须稍后让它响应。可能吗?

<iframe width="100%" height="500px" src="https://www.youtube.com/embed/T1mP3S4-o3c?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

【问题讨论】:

标签: javascript html css youtube


【解决方案1】:

如果您也想在响应中固定高度(根据问题为 500 像素),它将显示黑色边距。

由于其分辨率/比例(例如 1920px*1080px 或 1080px*720px),这些黑边显示视频中留下的空白区域。

您必须根据其比例应用宽度和高度以避免这些黑色边距。

最好的方法是同时使用宽度和高度 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 class="video">
  <iframe width="100%" height="100%" src="https://www.youtube.com/embed/T1mP3S4-o3c?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

希望这会有所帮助:)

【讨论】:

    【解决方案2】:

    其实根据你的代码body默认margin来了。如果你想去掉这样写body {margin:0;padding:0;}

    body {
      margin: 0;
      padding: 0;
    }
    &lt;iframe width="100%" height="500px" src="https://www.youtube.com/embed/T1mP3S4-o3c?rel=0&amp;amp;controls=0&amp;amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen&gt;&lt;/iframe&gt;

    【讨论】: