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

Question

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

Screenshot from Chrome, it is the same on mobile.

<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

所以这将使完整的url：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。

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

Background video from Youtube doesn't start while in mobile resolution

html

css

youtube

mobile

adaptive-design