为什么youtube嵌入的海报图片没有以完整的观众尺寸显示？

Question

这是我的嵌入代码：

<iframe width="1920" height="1080" src="//www.youtube.com/embed/2JkquK7PJ-c?rel=0&color=white&modestbranding=1&showinfo=0&wmode=transparent&autoplay=1" frameborder="0" allowfullscreen></iframe>

以下是它的表现方式。

视频上传是1080p，海报图片是从视频中选择的（虽然我有一个与自定义图像相同的问题），所以我不确定缺少什么。

Answer 1

尝试使用css设置iframe大小，最初内联如下：

<iframe style="height: 1080px; width: 1980px" src="//www.youtube.com/embed/2JkquK7PJ-c?rel=0&color=white&modestbranding=1&showinfo=0&wmode=transparent&autoplay=1" frameborder="0" allowfullscreen></iframe>

如果这样做，请通过给iframe一个id来对其进行整理，然后将维度作为规则添加到外部css文件中。

Answer 2

是的，这似乎适用于所有YouTube嵌入。如果它真的让你感到烦恼，就像我一样，我建议你显示缩略图，然后点击播放自动播放的视频。我在几年前写过使用jQuery这样做：start/play embedded (iframe) youtube-video on click of an image

您的缩略图可在以下位置找到：http://img.youtube.com/vi/YOURVIDEOID/maxresdefault.jpg

当他们进行此切换时，我正在整理AngularJS YouTube指令，我花了半个小时试图找出我在缩略图周围创建黑色边框所做的工作，直到我浏览其他嵌入式互联网视频并注意到它是YouTube系统范围内的。嘿。

不知道为什么YouTube决定这样做，看起来很可怕。