さあ、未来へ旅立とう

日々のこと、チーム紹介

  • 9 May. 2019

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

    CATEGORYBlog Web制作 TAG

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

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

     

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

     

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

     

     

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

     

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

     

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

     

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

     

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

     

     

    めっちゃ短い

     

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

     

     

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

     

     

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

     

     

    まとめ

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

     

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

     

     

    それではまた。

    茅ヶ崎市在住。雲南省の秘境からMac book片手に湘南の海へ流れ着いた無頼派。ディスプレイの秘孔を突き、気を送り込んで爆発させることを奥義としている。毎週、公用車で湯河原へ通っている若きクリエイターである。