2008 . 04 . 16

サイトに設置できるYouTubeの動画検索スクリプト

先日紹介したYouTube Fast Searchで公開されているスクリプトが、非常に秀逸だったので取り上げてみようと思います。

このスクリプトは以下の3つの機能を持ったJavaScriptで、設置することにより自サイトで動画検索が行えるようになるというものです。

  1. 随時入力したキーワードから検索した動画を表示
  2. あらかじめ指定したキーワードにヒットする動画を表示
  3. 特定のユーザーの動画を表示

使い方は、Plug-and-Play Youtubeよりスクリプトをダウンロード、自サーバにアップしたら例よってページの<head>タグ内に読み込むスクリプトを指定します。
<script src="/script/youtube.js" type="text/javascript"></script>
ディレクトリパスは環境に合わせてください。

HTMLのマークアップは以下のようにします。サンプルページを作ったので、参照しながら見てもらった方が分かりやすいと思います。

youtube.js - スクリプトサンプルページ


[ 検索した動画を表示 (AJAX) ]
<div id="youtubeDivSearch" style="display: block; clear: both"></div>
動画を検索: <input  type="text" onblur="insertVideos('youtubeDivSearch','search',this.value,'14',1);"/><input type="button" value="  Search  " />

[ 指定キーワードの動画を表示 ]
<div id="youtubeDiv" style="display: block; clear: both"></div>
<script>insertVideos('youtubeDiv','search','music video','14',1);</script>

[ 指定ユーザーの動画を表示 ]
<div id="youtubeDivUser" style="display: block; clear: both"></div>
<script>insertVideos('youtubeDivUser','user','lonelygirl15','14',0);</script>

1 - 指定キーワード/指定ユーザー
2 - 検索表示件数
3 - オーバーレイ表示の有無
オーバーレイ表示を1に設定すると、サムネイル画像のクリックでYouTubeにジャンプするのではなく、そのページ上で動画が再生されます。

外観に関してはほとんどの部分がCSSで定義することができ、まずは公開ページのサンプルからカスタマイズしていくのがいいでしょう。
このようなCSSを<head>タグ内挿入します。
<style type="text/css">
#youtubelist{
    margin: 0;
    padding: 5px;
    list-style: none;
    clear: both;
    display: block;
}
#youtubebox{
    clear: right;
    display: inline;
    padding: 0;
    margin: 2px;
}
#youtubethumb {
    margin-bottom: 5px;
    width: 80px;
    height: 70px;
    border: 4px solid #333;
}
#youtubecontent {
    margin-left: -430px;
    top: -220px;
    position: absolute;
    left: 50%;
    padding: 0 20px 20px 20px;
    background: #333
}
#youtubeoverlay {
    background-color: #fff;
    overflow: visible;
    position: absolute;
    height: 1px;
    width: 100%;
    top: 50%;
    z-index: 100
}
</style>

上のサンプルCSSは少しだけ手を加えただけのものです。オーバーレイ表示させる場合はz-indexを適宜に定義しておく必要があるようです。ポジション指定など、より完成度を上げるにはもうちょっと作りこまないといけません。
また、サムネイルのマウスオーバー/アウトのようにスクリプト側で定義されているものもあるので、デザインの細部に渡ってカスタマイズする場合はスクリプトを弄る必要があります。

さて、サンプルを試していただくと分かると思いますが、とにかく速い。逆に、YouTube本家の検索ページはいかに検索以外の要素が多いかが分かるようです。

YouTubeのAPIがリニューアルされることで、今後ウィジェットやブログツールも一層多く開発されることが予想されますが、こんなシンプルでスクリプトならではのカスタマイズ性を生かして、あなたのサイトを構築してみてはいかがでしょうか。