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

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

最終更新日:2020.12.24 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 埋め込みプレーヤーとプレーヤーのパラメータ
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram