[2022/02/07時点] Youtubeのiframe埋め込み動画を自動再生する

mayatasomayataso

Youtubeのiframe埋め込み動画を自動再生できる？

※ ユーザによるインタラクティブ操作が事前に行われていることが前提

  • PC -> できる
  • Android -> やり方次第でできる
  • iOS -> 条件とやり方次第でできる

PC

クエリパラメータにautoplay=1を付ければ完成。iframe内のurlを

https://www.youtube.com/embed/<動画ID>?autoplay=1

Android

PCの手順だけでは自動再生されない。
追加で、JavaScriptにてiframeに対しpostMessageを送信することで再生可能。

const targetWindow = document.getElementById("iframe")
const contentWindow = targetWindow?.contentWindow
const body = JSON.stringify({
  event: "command",
  func:"playVideo",
  args: {},
})
contentWindow.postMessage(body, "*")

iOS

Androidの手順にプラス、ミュート状態でスタートする必要がある。

https://www.youtube.com/embed/<動画ID>?autoplay=1&mute=1