Html 制作YouTube视频的全宽和固定高度

我想显示一个YouTube视频，全宽，高700px

以下是我的嵌入代码：

<iframe class="home_video_iframe" frameborder="0" allowfullscreen="1" 
 title="YouTube video player" width="100%" height="100%"
 src="https://www.youtube.com/embed/3iboEi4GvQA
 autoplay=1&amp;color=white&amp;controls=0&amp;disablekb=1&amp;enablejsapi=1&am;
 loop=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;theme=light&amp;wmode=
 transparent&amp;playlist=3iboEi4GvQA&amp"></iframe>

---

使用%表示宽度，如您所做，并使用高度：700px；代替身高：100%

但请记住，由于视频会拉伸，您不能强制调整大小以完全满足您的需要。假设您有300px的宽屏幕尺寸，并且您强制使用高度：700px；。它不适用于youtube视频。它们将调整自身大小，使其看起来更漂亮

<iframe class="home_video_iframe" frameborder="0" allowfullscreen="1" title="YouTube video player" width="100%" height="500px" src="https://www.youtube.com/embed/3iboEi4GvQA?autoplay=1&amp;color=white&amp;controls=0&amp;disablekb=1&amp;enablejsapi=1&amp;loop=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;theme=light&amp;wmode=transparent&amp;playlist=3iboEi4GvQA&amp"></iframe>

---

其中表示高度设置，例如高度=500px。

创建响应性YouTube嵌入的关键在于填充和容器元素，这允许您为其提供固定的纵横比。您还可以将此技术用于大多数其他基于iframe的嵌入，例如幻灯片

下面是典型的YouTube嵌入代码的样子，具有固定的宽度和高度：

---

工作原理：容器元素的高度为零，底部填充百分比为零。底部填充百分比是容器宽度的百分比，因此它具有固定的纵横比。但是为了让iframe显示在零高度容器中，你需要使容器相对，iframe绝对，定位在div中。

谢谢你的回复，但问题是我不想看到YouTube的黑色边距，希望视频本身的全宽没有黑色边距。黑色边距仅显示在顶部和底部，而不是左侧和右侧。你想删除顶部和底部的黑色边距吗？不，我只需要宽屏幕的边距。这就是为什么我在左侧和右侧有边距。我看不到右侧和左侧有任何边距。你能发布一个截图吗？当你限制iframe的高度时，你不能拥有全宽。如果将高度增加到160%，您将获得全宽，但这将超过1200像素。

<iframe class="home_video_iframe" frameborder="0" allowfullscreen="1" title="YouTube video player" width="100%" height="500px" src="https://www.youtube.com/embed/3iboEi4GvQA?autoplay=1&amp;color=white&amp;controls=0&amp;disablekb=1&amp;enablejsapi=1&amp;loop=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;theme=light&amp;wmode=transparent&amp;playlist=3iboEi4GvQA&amp"></iframe>

<iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw" frameborder="0" allowfullscreen></iframe>

<div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw" 
frameborder="0" allowfullscreen class="video"></iframe>
</div>

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}