Ownedmedia ウェブ制作に役立つコンテンツを発信中!

HTML 2019.01.17

インラインで埋め込んだYouTubeをページ読み込み完了後に自動再生させる

Tags: ,
最終更新日:Update

過去記事「インラインで埋め込んだYouTubeの関連動画表示を削除する」で紹介した内容に続き、YouTubeのインライン埋め込みでよくある要件のメモです。

 

ファーストビューなどに設置される場合などは、ページと同時にYouTubeを読み込みさせて自動再生させることで、すぐにムービーを見せたいというケースがあるかと思います。そんな場面で使える設定になります。

 

こちらも同じく下記のように「?autoplay=1」のパラメーターを指定するだけで簡単に自動再生させることができます。

<iframe src="https://www.youtube.com/embed/**************?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

 

ただし実際にはブラウザの仕様で、ユーザビリティの観点から自動再生をする場合には音声がオフになっていることが望ましいということで、ミュート設定のパラメータである「mute=1」を併記する必要があります。ちなみにパラメータを続けて設定したい場合は下記のように「&」に続けて記述する形になります。

src="https://www.youtube.com/embed/**************?autoplay=1&mute=1"

 

何かと求められるのが多いのですが、つい忘れてしまって毎回調べる羽目になるので、覚えておきたいと思います、、

 

(参考にさせて頂いたサイト)
YouTube 埋め込みプレーヤーとプレーヤーのパラメータ

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?