I'll be NET】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > JavaScript/jQuery > URLだけでYoutubeの動画一覧を作ってくれるjQueryプラグイン「Youtube video gallery」

URLだけでYoutubeの動画一覧を作ってくれるjQueryプラグイン「Youtube video gallery」

URLを指定するだけで簡単にYoutubeの動画一覧を作ってくれるjQueryプラグイン「Youtube video gallery」を紹介します。

Youtube Video Gallery

 

Youtube video galleryとは

「Youtube video gallery」は、リスト形式で書いたYouTubeのリンクURLだけでYouTubeのギャラリーを自動作成してくれるjQueryプラグインです。
動画のサムネイルをクリックすると、liteboxで作成できるプラグインです。しかも、動画がページ遷移をせずにLightbox形式で閲覧出来ます。

DEMO

ダウンロード

スクリプトは下記URLからダウンロードしてください。

https://github.com/clanceyp/youtube-video-gallery

利用方法

html(<body>タグ内の記述)

下記のように動画へのリンクをリスト(<ul>タグ)で用意します。

                <ul class="youtube-videogallery">
                    <li><a href="http://www.youtube.com/watch?v=UCOC1YwNwZw">Call me gordie</a></li>
                    <li><a href="http://www.youtube.com/watch?v=CjgT8Af1kGc">Bad scooting</a></li>
                    <li><a href="http://www.youtube.com/watch?v=4psVnsYlBok">Good scooting</a></li>
                    <li><a href="http://www.youtube.com/watch?v=05Cgtg_N4eI">Knitting</a></li>
                </ul> 

html(<head>タグ内の記述)

下記のようにスクリプトを読み込みます。

    <link rel="stylesheet" href="./css/youtube-video-gallery.css" type="text/css" media="all" />
    <script type="text/javascript" src="./js/jquery.youtubevideogallery.js"></script>
    <script type="text/javascript">
        $( document ).ready(function( $ ) {
            $('ul.youtube-videogallery').youtubeVideoGallery();
        });
    </script>

Colorboxを利用する場合は、

    <link rel="stylesheet" href="../css/colorbox.css" type="text/css" media="all" />
    <script type="text/javascript" src="../js/jquery.colorbox.js"></script>
    <link rel="stylesheet" href="./youtube-video-gallery.css" type="text/css" media="all" />
    <script type="text/javascript" src="./js/jquery.youtubevideogallery.js"></script>
    <script type="text/javascript">
        $( document ).ready(function( $ ) {
            $('ul.youtube-videogallery').youtubeVideoGallery( {plugin:'colorbox'});
        });
    </script>

上記のように、Colorboxを読み込んで、オプションに{plugin:'colorbox'}を利用して下さい。

その他特記事項

画像クリック時の再生にfancyboxを利用することも可能です。 
他のオプションについては詳しくは配布サイトをご確認下さい。

この記事が気に入ったらシェアしてください。

関連記事

Instagramの写真一覧をサイトに表示する方法

Instagramの写真一覧をサイトに表示する方法

サムネイル画像をクリックするとメイン画像をふわっと切り替えるjQuery

HTML上の要素の位置を変更するjQuery

HTML上の要素の位置を変更するjQuery

JavaScriptで現在のURLを取得する方法

ロード時やスクロール時にふわっと表示させるjQuery

ロード時やスクロール時にふわっと表示させるjQuery

pixiv小説のように縦書き表示する方法-2019版

pixiv小説のように縦書き表示する方法-2019版

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

Profile

yuricolo@I'll be NET

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。