来自Youtube的背景视频在移动分辨率下无法启动

Question

我使用CSS和Youtube IFrame制作背景视频，但在切换到移动分辨率后（使用F12等），它并没有启动。

Screenshot from Chrome, it is the same on mobile.

GitHub repo with my code.

<div class="video-background">
  <div class="video-foreground">
    <iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

Answer 1

目前在大多数移动设备上实际上无法自动播放视频。这实际上是关于手机用完的带宽。

我找到了这些参数，您可以使用它来隐藏评论中讨论的播放按钮。这些是：

showinfo=0 controls=0 autohide=1

这样就可以制作完整的网址：https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ&showinfo=0&controls=0&autohide=1

Answer 2

手机不支持自动播放bg-video。所以我习惯在移动版本上设置img。