ITエンジニア/デザイナ向けにオープンソースを毎日紹介

YouTubeはブログやメディアサイトなど、多くのWebサイトで埋め込まれて使われています。YouTube本体が埋め込みコードをリリースしているのでそれを使うのが一番手軽ですが、iframeタグがあまり多いとサイトが重たくなりますし、表示した時点でYouTubeにアクセス情報が渡るのも良い気分ではなさそうです。

そこで使ってみたいのがYoutube-video-galleryです。YouTube動画を幾つ並べて表示しても快適な、ギャラリー表示ライブラリです。

Youtube-video-galleryの使い方

デモです。この状態はあくまでも画像なので表示が高速です。

クリックするとモーダル表示になって動画が再生できます。

Fancyboxと連携して使うこともできます。

Colorboxと組み合わせた例。使い慣れたライブラリだと安心です。

こちらもモーダルで表示されます。

Youtube-video-galleryはjQueryを使っているので、すでに使い慣れている人も多いのが利点です。Youtube-video-galleryは最初は画像なので幾つ並べても高速なのが便利ですが、再生はモーダルベースなので複数動画を同時に再生すると言った用途には向かないでしょう。

Youtube-video-galleryはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Youtube-video-gallery demo

clanceyp/youtube-video-gallery: simple jquery extension

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2