Question

我希望视频宽度= 100％，高度= 500px（固定高度）。但我不想要顶级＆amp; 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>

Answer 1

如果您需要固定高度（每个问题500px），它将显示黑色边距。

由于分辨率/比例（例如1920px * 1080px或1080px * 720px），这些黑色边距显示视频中留下的空白区域。

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

最好的方法是同时使用宽度和高度100％。

＆＃13;

* {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%;
}

＆＃13;

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

＆＃13;

希望这会有所帮助：）

Answer 2

实际上，根据你的代码正文默认保证金来了。如果你想删除像这样的身体{margin：0; padding：0;}

＆＃13;

body {
  margin: 0;
  padding: 0;
}

＆＃13;

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

＆＃13;

我想删除youtube视频的顶部和底部黑色边缘

2 个答案: