長野市のWebサイト制作会社 デザインスタジオ・エルWeb事業部「ウルトラエル」

アンテナを360度張り巡らせての学びの記録。年間360回更新します。
Webディレクター・ハラヒロシのブログ

2018.04.13

YouTubeを背景動画&自動再生

backgroundにYouTubeを置いて自動再生する際に遭遇したこといくつか

・Safari(iOS10以降)、Chrome for Android53以降で自動再生は可能(ミュート)
・PC Safariのバージョン11からオーディオ付きのメディアが自動再生されなくなった
・YouTube IFrame Player APIを利用
・動画の代替画像の検討

スマホでの動画インライン自動再生まわりについて調べたことまとめ - とりあえずphpとか
Safari環境でYoutubeが自動再生されない
【iOS/Android/PC対応】ページを開くと動画を自動再生させる方法を調べてみた | 大石制作ブログ
iframe 組み込みの YouTube Player API リファレンス  |  YouTube IFrame Player API
YouTube Player APIを使う時のtips集 | Tips Note by TAM

結局、今回は閲覧環境の負荷を考えてスマホでの自動再生はあきらめ、静止画の代替画像にするという選択にしました。ですが、実装環境は徐々に整ってきている印象。そのうち当たり前になるかもです。

Facebook twitter このエントリーをはてなブックマークに追加

電子書籍版 マンガ「Webクリエイター・ウルトラエル」マンガ「Webクリエイター・ウルトラエル」
ITが発展した下界に下りてきた忍者・ウルトラエルが持ち前の忍術・戦術・記憶術を駆使しながら、一人前のWebクリエイターを目指して奮闘します。
※Vol.01~Vol.10をまとめ読みできます(すべて無料です)
「ブクログのパブー」で公開していますので是非ごらんください。

Webディレクター・ハラヒロシ

ABOUT

デザインスタジオ・エルWeb事業部のWebディレクター・ハラヒロシの仕事の肥やしブログ。アンテナを360度張り巡らせて、なるべく年間360回更新します。
詳細プロフィールはこちら

twitter Feedly Facebook Instagram Pinterest Amazon

ARCHIVES

過去記事一覧

SEARCH


ウルトラエル