インラインで埋め込んだYouTubeをページ読み込み完了後に自動再生させる
最終更新日: 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 埋め込みプレーヤーとプレーヤーのパラメータ
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
categories