[JS] YouTubeのインラインプレイヤーとモーダルダイアログの連動

以下要件:

  1. YouTubeの動画をインラインで再生させる
  2. 1をクリックするとモーダルでその動画を拡大表示させる
  3. モーダルウィンドウが開いている時はインライン動画は停止、閉じたら再生

モーダルはUIkitのを利用しているが、
開く時と閉じる時に発火するイベントにプレイヤーの制御を仕込む下りはどのライブラリでも同じ。

再生箇所も連動させるなら、モーダル側もJSでプレイヤー作って(orインラインのを再利用して)、getCurrentTime()seekTo()で制御かな。

See the Pen Linking YouTube inline player and modal dialog by Tenderfeel (@Tenderfeel) on CodePen.

もーこの鬼切動画がかっこよすぎてな…


コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください