这是我的嵌入代码：
<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，海报图片是从视频中选择的（尽管我遇到了与自定义图片相同的问题），所以我不确定缺少什么。
【问题讨论】：
标签： html iframe youtube youtube-api embed
是的，这似乎适用于所有 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 为何决定这样做，这看起来很糟糕。
【讨论】：
$('img.video-poster').on('click', function(){$(this).replaceWith('<iframe width="'+$(this).data("width")+'" height="'+$(this).data("height")+'" src="https ://www.youtube.com/embed/'+$(this).data("id")+'?autoplay=1&loop=1&rel=0&wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');});
尝试使用 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 文件中。
【讨论】：