[modal-video.js] 5分以内にモーダルでyoutubeの埋め込み（レスポンシブ対応）を実装してみよう。

こんにちは！
デザイナーの山嵜です。得意料理は肉うどんです。

突然ですが、webサイトのコーディングをしている際に、こんなリクエストをお見舞いされることはないでしょうか。

「ここの動画リンクなんだけど、外部リンクではなくてモーダルで動画が開くようにしてくれないかな。アッもちろんレスポンシブでね。」

さぁここで、コーダーの脳裏によぎるタスクリストを考えてみましょう。

①モーダル用のプラグインいれなきゃ….どれにしょう…
②モーダル用のhtmlとcssも新しく書かなきゃ….jsも用意して…コード散らかる….
③閉じるボタンもオーバーレイも用意しなきゃ
④youtube埋め込みのレスポンシブ化…!? paddingで余白とって、リサイズにも対応できるようにしなきゃ〜
⑤あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら……

などなど、
パッと思いつくだけでも相当な工数になることが予想されます。

そんなときに！今回ご紹介したいのが
パッとyoutube埋め込みモーダルを実装できるプラグイン
「modal-video.js」です。

【公式サイト】
https://appleple.github.io/modal-video/

実装時の基本的なコードは下記になります。

めっちゃ短い

htmlが全然汚れない。
youtubeのidを指定するだけで簡単に実装できます。

公式サイトのデモにて
実際の挙動を確認できますが、
どんなデザインでも違和感のないキレイなアニメーションで挙動しているのがわかりますね。

勿論レスポンシブも大丈夫。

まとめ

なんと言っても
書くコードの量がめちゃめちゃ少ないので、
wordpressのCMS可もしやすそうですね。

実用面で考えれば
自分で機能・デザインを作り込んだモーダルが一番ですが、
時間のない中でお助けになってくれる….そんなプラグインの存在も
覚えておきたいですね。

それではまた。