とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

YouTube埋め込み動画をPC、スマホで音声なしで自動再生する方法。レスポンシブで背景全面、背景動画にも。

YouTube埋め込み動画をPC、スマホで音声なしで自動再生する方法。レスポンシブで背景全面、背景動画にも。

サイトにYouTubeを掲載するときに

背景全面に動画を表示してデザインの

一部として利用するケースがあります。

 

背景でなくてもYouTubeをサイトに

設置して自動再生しておきたい。

 

ググったところ、

PCでは自動再生できても、

スマホではブラウザの制約上、

自動再生ができないサンプル

ばかりだったので、

自分用メモとして使えるコード。

 

YouTube API を使用した

自動再生のコードです。 

 

See the Pen MWgozQy by とあるweb屋のn太郎 (@ntoaru) on CodePen.

 

videoId と playlist のところを

YouTubeの動画IDにすればOKです。

 

動画はそのまま設置しても

いいですし、背景にしたい場合は、

CSSで z-index で要素の背景に

敷くなどしていただければと。

 

ちなみに昨今のブラウザの動向

としては、音声ありの動画は

自動再生しないという方向に

なっています。

 

iOS では iOS 10から

videoタグでのインライン再生が

可能になりました。ですがやはり

自動再生は「音声なし」です。

iOS10からiPhoneのSafariでHTML5のVideoをインラインで再生可能&無音なら自動再生も! | スターフィールド株式会社

 

音声なしなら自動再生OK

ということですね。

 

音声ありの動画を自動再生は

ブラウザの制約上できないと

考えていいでしょう。

 

ユーザビリティとしても

音声ありの動画を自動再生する

のはよろしくないですしね。

 

参考サイトにしたサイト、

貼っておきます。

www.non-standardworld.co.jp

cly7796.net