Question

我希望全屏显示YouTube视频，高度为700像素。

这是我的嵌入代码：

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

Answer 1

使用％作为宽度，并使用height: 700px;代替height: 100%;

<iframe class="home_video_iframe" frameborder="0" allowfullscreen="1" title="YouTube video player" width="100%" height="700px" 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>

但请记住，由于视频会拉伸，因此您无法强制完全根据需要调整大小。假设你有300px宽的屏幕尺寸，你被迫拥有height: 700px;。它不适用于YouTube视频。他们会调整自己看起来很好。

Answer 2

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

它表示高度设置为例如height =＆＃34; 500px＆＃34;。

Answer 3

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

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

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

如果我们可以给它100％的宽度会很好，但是由于高度保持固定不会起作用。你需要做的是将它包装在一个像这样的容器中（注意类名和宽度和高度的删除）：

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

并使用以下CSS：

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

这是如何工作的：容器元素的高度为零，底部填充百分比。底部填充百分比是容器宽度的百分比，因此它给出了固定的纵横比。但是为了让iframe显示在零高度容器内，你需要使容器相对而iframe绝对位于div内。

使YouTube视频全宽和固定高度

3 个答案: