我想删除 youtube 视频的顶部和底部黑色边距答案

【问题标题】：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>

【问题讨论】：

添加您的代码 sn-p 它有助于找到该空间的来源。
代码在哪里？
我已经添加了代码@MerajKhan
那么，你不能使用html的绝对属性吧？
看看这个也wistia.com/blog/remove-black-bars-from-online-video

标签： 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;

【讨论】：