Fancybox – YouTube Gallery


YouTube 動画のギャラリー


YouTube 動画のギャラリー(サムネイルあり)

YouTubeが提供しているサムネイル画像を、URLを指定して使用できます。

Fancyboxを使用したYouTube動画ギャラリーの作成手順

  • スクリプトBOXを作成し、「外部JSライブラリ」に ”fancybox” を設定します。
  • スクリプトBOX内に、動画の数だけアイテムブロック(シングルBOX)を作成します。
  • アイテムブロックに任意の YouTube 動画へのリンクを設定します。(画面上部メニューにあるリンク設定ボタンより)
  • アイテムブロックの「HTML属性」欄に data-fancybox="ギャラリーID" を設定します。(ギャラリーIDは半角英数)
  • アイテムブロック内に、TnJメディアブロックを挿入し、「外部メディアURL」に https://img.youtube.com/vi/<VIDEO_ID>/hqdefault.jpg のように画像URLを指定します。画像URL内の <VIDEO_ID> はYouTube各動画のURLにある /watch?v=<VIDEO_ID> の値に置き換えてください。また、サムネイル画像は複数のサイズが提供されており、ファイル名でサイズを指定できます(後述)
  • スクリプトBOXの 「Javascriptコード」欄に Fancybox を動作させるコードを書きます。data-fancybox にギャラリーIDを指定します。

コード例

Fancybox.bind('[data-fancybox="stones-lyric"]', {
});

YouTubeサムネイル画像のサイズ

以下のように画像サイズに対応したファイル名を指定できます。

デフォルトサムネイル : (120 x 90)
https://img.youtube.com/vi/<VIDEO_ID>/default.jpg

中品質サムネイル : (320 x 180)
https://img.youtube.com/vi/<VIDEO_ID>/mqdefault.jpg

高品質サムネイル : (480 x 360)
https://img.youtube.com/vi/<VIDEO_ID>/hqdefault.jpg

HQ動画サムネイル : (640 x 480)
https://img.youtube.com/vi/<VIDEO_ID>/sddefault.jpg

FULLHDサムネイル : (1920 x 1080)
https://img.youtube.com/vi/<VIDEO_ID>/maxresdefault.jpg