2019.05.09

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

[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可もしやすそうですね。

 

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

 

 

それではまた。

Marvericks

SHORT MOVIES

株式会社マーベリックス
TEL:0466-66-8445
【4月23日まで工事中のためお電話が繋がりません】
〒251-0035
神奈川県藤沢市片瀬海岸3丁目20-15

  • Instagram

マーベリックスは神奈川県藤沢、茅ヶ崎をベースに活動するホームページ制作会社です。

© Mavericks Inc.