【Vanilla JS】モーダルを開いてYouTube動画を再生する処理（Micromodal.js + YouTube IFrame Player API）
[ ID : 12496 ]
実装目安
3分
概要
モーダルを開いてYouTube動画を再生する処理をMicromodal.jsとYouTube IFrame Player APIを用いて実装する。用途・要件
- トリガー要素をクリックすると、モーダルが開きYouTube動画を自動再生する。
- 各トリガー要素のdata属性にYouTube動画のIDを指定する事で、異なるYouTube動画を表示することが可能。
- 「YouTube IFrame Player API」を使用する。
その他
- Micromodal.js v0.4.10使用。
注意
- モーダルが開いた際の、iOSデバイスでの背景スクロール禁止処理は含まれません。
検証ブラウザ
- Google Chrome(最新)
- Microsoft Edge(最新)
- Firefox(最新)
- Safari(最新)
実装
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
