jQuery pluginYouTube連携
- jquery-tubular〔背景いっぱいにYouTube動画を再生〕
- jQuery Youtube Player〔YouTubeビデオ埋め込みカスタマイズ〕
- jquery.mb.mediaEmbedder.1.0〔Vimeo、Ustream、livestream、YouTube、mp3などのメディアファイルを簡単に埋め込み〕
- prettyPhoto〔リンククリックで、Vimeo、YouTube動画をポップアップ表示〕
- jYouTube〔YouTubeビデオのサムネイルやスクリーンショットを取得するjQueryプラグイン〕
- YouTubeのRSSから取得したビデオのサムネイルとリンクを出力〔jQuery使用〕
- YouTube Chromeless Video Player〔クロムレスプレーヤー埋め込みプラグイン〕
- jQuery Youtube playlist plugin〔カスタマイズ性に富んだオリジナルの再生リストが作れる〕
- Oembed plugin for jQuery〔写真、動画など様々なメディアをURLだけで簡単に埋め込める〕
- jQuery YouTube Plugin〔任意のキーワードでのYouTube動画検索結果をWebページに表示〕
- jQuery YouTube TubePlayer Plugin〔プレーヤーのコントロール制御と各種イベント発生時のコールバックが用意されている〕
- A jQuery Plugin For All Your Video Embedding Needs〔YouTubeやVimeoなどの動画をWebページに埋め込み〕
- YouTubin’ Plugin for jQuery〔YouTube動画のURLを指定でプレーヤーをWeb埋め込み〕
- Making a Custom YouTube Video Player With YouTube’s APIs〔プログレスバーと各種コントロールをカスタマイズできるクロムレスプレーヤーの埋め込み〕
jquery-tubular
背景いっぱいにYouTube動画を再生
2011/1/4
jquery-tubular
YouTubeビデオをブラウザの画面いっぱいにフルサイズで表示するjQueryプラグイン。 YouTubeチャンネルの紹介とかによさげ。
YouTube JavaScript APIを使用して、動画の制御(再生、一時停止、停止、ミュートON/OFF)ができるようになっています。動画は、SWF埋め込みjQueryプラグインの「swfobject.js」を使用して、画面フルサイズのブロック要素を生成して埋めこまれています。 この動画部分はz-indexで後方に背景としてしかれている(z-index=1)ので、z-indexを調整することで、タイトルや説明文などHTML要素を動画の上に表示することができます。
動画のアクペクト比は、jquery.tubular.js内にある変数「videoRatio」で16/9、4/3など変更できます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/css/reset.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <script type="text/javascript" charset="utf-8" src="/content/lib/jquery/jquery.tubular.js"></script> <script type="text/javascript"> $(function() { $('body').tubular('9YEEl52u8XE','wrapper'); // f-UGhWj1xww cool sepia hd // 49SKbS7Xwf4 beautiful barn sepia // Play/Pause $('#videoPause').click(function() { if ($(this).hasClass('videoPaused')) { ytplayer.playVideo(); $(this).removeClass('videoPaused'); } else { ytplayer.pauseVideo(); $(this).addClass('videoPaused'); } return false; }); // Mute/Unmute $('#videoMute').click(function() { if ($(this).hasClass('videoMute')) { ytplayer.mute(); $(this).removeClass('videoMute'); } else { ytplayer.unMute(); $(this).addClass('videoMute'); } return false; }); // Nuke video (for slow connections -- stops loading entirely) $('#videoStop').click(function() { ytplayer.stopVideo(); ytplayer.clearVideo(); $('#yt-container').hide(); return false; }); }); </script> <!-- CSS --> <style type="text/css"> body { position:relative; font-size:12px; } #main { position:absolute; top:110px; left:30px; -webkit-border-radius:5px;-moz-border-radius:5px; background:#000; opacity:.7; color:#fff; margin:0 auto; padding:10px; width:21em; } #main h1 { margin:0 0 10px 0; padding:0; } #main p { margin:5px 0; } #main h1 a { background:transparent url(/content/img/ajax/youtube.png) no-repeat 0 0; padding-left:20px; line-height:16px; font-weight:bold; font-size:16px; } a { color:#ff6699; } #sidebar { position:absolute; top:110px; right:30px; -webkit-border-radius:5px;-moz-border-radius:5px; background:#000; opacity:.7; color:#fff; margin:0 auto; padding:10px; width:11em; } </style> </head> <body> <!-- CODE --> <div id="wrapper"> <div id="main"> <h1><a href="http://www.youtube.com/user/cocoism3">cocoism channel</a></h1> <p>なにかとったらアップするかもしれません。グルメと犬がほとんどだと思われますw</p> <p>Video controls: <a href="" id="videoPause">再生/一時停止</a> | <a href="" id="videoMute">ミュート</a> | <a href="" id="videoStop">停止</a></p> </div> <div id="sidebar"> <p>参照:<a href='http://code.google.com/p/jquery-tubular/' target='_blank'>jquery-tubular</a></h4> </div> </div><!-- #wrapper --> <!-- / CODE --> </body> </html>
jQuery Youtube Player
YouTubeビデオ埋め込みカスタマイズ
2011/1/4
jQuery Youtube Player
YouTubeビデオのプレーヤー、ツールバー、再生リストなどをカスタマイズできるjQueryプラグイン。
「Multiple Playlists」のサンプルでは、再生リストの切り替えができるようになっています。 再生リストにはユーザー名、再生リストIDを指定したり、好きな動画のID&タイトルのセットを配列で指定して独自の再生リストを作ることもできます。
動画の埋め込みには、jQueryプラグインの「swfobject.js」、ツールバーと再生リスト部分のスタイルは、jQuery UIのテーマが使われています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <script type="text/javascript" src="/content/lib/jquery/jquery.youtube.player.js"></script> <!-- CSS --> <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/black-tie/jquery-ui.css" /> <link type="text/css" rel="stylesheet" href="/content/lib/jquery/youtube-player.css" /> <style type="text/css"> #centered { width:700px; } .watchvideo { width:430px; float:left; } .playlists { float:right; width:250px; margin:0; padding:5px; text-align:left; border:1px solid #000; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; background:#eee; } </style> </head> <body> <body> <h1>設置サンプル</h1> <p>参照:<a href='http://badsyntax.github.com/youtube-player/' target='_blank'>jQuery Youtube Player</a> - Multiple Playlists</p> <!-- CODE --> <div id="centered"> <div class="cf"> <div class="watchvideo"> <div class="youtube-player"> <div class="youtube-player-video"> <div class="youtube-player-object"> You need Flash player 8+ and JavaScript enabled to view this video. </div> </div> </div> </div><!-- .watchvideo --> <div class="playlists"> <strong>Playlists:</strong> <ol> <li><a href="#playlist-1">My Favorite POPS<br>(videoID+title指定)</a></li> <li><a href="#playlist-2">My Favorite R&B<br>(videoID+title指定)</a></li> <li><a href="#playlist-3">ChrisetteMicheleVEVO<br>(ユーザー名指定)</a></li> <li><a href="#playlist-4">TheXFactorUK/2010 Live Show 1<br>(再生リストID指定)</a></li> </ol> <div id="loading" style="margin: 4px 0;display:none;">loading...</div> </div><!-- .playlists --> </div> </div> <script type="text/javascript"> var playlists = { 'playlist-1': { title: 'POPS', videos: [ { id: 'bOiTaaoKca4', title: 'Josh Groban- You Raise Me Up (Live)' }, { id: 'YEbgBKV4_Mk', title: 'Ke$ha - TiK Tok' }, { id: '1OfsZyYPLoI', title: 'Lady Antebellum - Need You Now' } ] }, 'playlist-2': { title: 'R&B', videos: [ { id: 'oBhj-Tv4WHI', title: "Usher ft. Pitbull - DJ Got Us Falling In Love Again" }, { id: 'my_lMpDCrI0', title: "Chrisette Michele - I'm A Star" } ] }, 'playlist-3': { user: 'ChrisetteMicheleVEVO' }, 'playlist-4': { playlist: '87A4836EB1B0E8B7' } }; var playerConfig = { playlist: playlists['playlist-1'], // initial playlist onError: function(msg){ alert(msg); }, onBeforePlaylistLoaded: function(playlist){ $('#loading').show(); }, onAfterPlaylistLoaded: function(playlist){ $('#loading').hide(); } }; $(function(){ var player = $('.youtube-player').player( playerConfig ); $('.playlists a[href*=#]').click(function(){ var playlist = playlists[ this.hash.replace(/^.*?, '') ]; player.player('loadPlaylist', playlist); return false; }); }); </script> <!-- / CODE --> </body> </html>
prettyPhoto
リンククリックで、Vimeo、YouTube動画をポップアップ表示
2008/11/16
prettyPhoto
jQuery lightboxを継承した音声・動画ファイルをWebページに埋め込んでポップアップ表示するマルチメディア対応プラグイン。 リンククリックで、vimeo、YouTubeなどの動画ファイルをポップアップ表示して再生することができます。
▼head要素内
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' ></script>
<script type='text/javascript' src='path/to/jquery.prettyPhoto3.js'></script>
<script type='text/javascript'>
$(function(){
$('a[rel^='prettyPhoto']').prettyPhoto();
});
</script>
<!-- CSS -->
<link rel='stylesheet' type='text/css' href='path/to/css/prettyPhoto.css' />
▼body要素内
<a href='http://vimeo.com/17621410' rel='prettyPhoto'>Vimeo</a> <a href='http://www.youtube.com/watch?v=GILIk8W00s4' rel='prettyPhoto'>YouTube</a>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script> <script type="text/javascript" src="/content/lib/jquery/jquery.prettyPhoto3.js"></script> <script type="text/javascript"> $(function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); }); </script> <!-- CSS --> <link rel="stylesheet" type="text/css" href="/content/lib/jquery/prettyphoto3/css/prettyPhoto.css" /> <style type="text/css"> #demo p { line-height:16px; } #demo p a { text-decoration:none; font-weight:bold; } #demo p a img { vertical-align:middle; padding-right:5px; } </style> </head> <body> <h1>設置サンプル</h1> <p>参照:<a href='http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/' target='_blank'>prettyPhoto</a></p> <p>Vimeo、YouTube動画を埋めこんでみました。</p> <!-- CODE --> <div id="demo"> <h2>Vimeo</h2> <p><a href="http://vimeo.com/17621410" rel="prettyPhoto" title="New York Times Magazine - Year In Ideas by Sean Pecknold"><img src="/content/img/ajax/vimeo.png" alt="Vimeo" />ビデオを見る</a></p> <h2>Youtube</h2> <p><a href="http://www.youtube.com/watch?v=GILIk8W00s4" rel="prettyPhoto" title="布団にもぐるところ"><img src="/content/img/ajax/youtube.png" alt="YouTube" />ビデオを見る</a></p> </div> <!-- / CODE --> </body> </html>
jYouTube
YouTubeビデオのサムネイルやスクリーンショットを取得するjQueryプラグイン
2011/1/5
jYouTube - YOUTUBE VIDEO THUMBNAIL/SCREENSHOT GETTE
指定したYouTubeビデオのサムネイルを取得するjQueryプラグイン。
第1引数に「YouTubeビデオのURL」(またはビデオID)、第2引数に「サムネイルのサイズ」を指定すると、そのビデオのスクリーンショットのURLを取得することができます。 サムネイルのサイズは“small”(120x90)、“big”(480x360)を指定可能です。bigの場合は省略可能です。
プラグイン内で“small”は2フレーム目、“big”は0フレーム目のサムネイルを取得するよう指定されていますのでその箇所を変更すれば、他のフレームのサムネイルを取得できます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script> <script type="text/javascript" src="/content/lib/jquery/jyoutube.js"></script> <script type="text/javascript"> $(function(){ // 1.YouTubeビデオの動画IDを指定 $("#thumb").attr("src",$.jYoutube('8e_wXc0m97w')); // 2.YouTubeビデオのURLを指定+サムネイルサイズ(small) $("#thumb_small").attr("src",$.jYoutube('http://www.youtube.com/watch?v=9YEEl52u8XE', 'small')); // 3.YouTubeビデオのURLを指定+サムネイルサイズ(big or null) $("#thumb_big").attr("src",$.jYoutube('http://www.youtube.com/watch?v=9YEEl52u8XE', 'big')); }); </script> </head> <body> <h1>設置サンプル</h1> <p>参照:<a href='http://plugins.jquery.com/project/jyoutube' target='_blank'>jYouTube</a></p> <p>指定したYouTube動画のサムネイルを取得。</p> <!-- CODE --> <div id="demo"> <h2>1. YouTubeビデオの動画IDを指定(デフォルトは“big”)</h2> <p><img id="thumb" /></p> <h2>2. YouTubeビデオのURLを指定+サムネイルサイズ(small)</h2> <p><img id="thumb_small" /></p> <h2>3. YouTubeビデオのURLを指定+サムネイルサイズ(big or null)</h2> <p><img id="thumb_big" /></p> </div> <!-- / CODE --> </body> </html>
YouTubeのRSSから取得したビデオのサムネイルとリンクを出力
jQuery使用
2011/1/5
jQueryを使用して、YouTubeのRSSから取得したビデオのサムネイルとリンクを出力するサンプルです。
▼下記のサンプルでは「hamster+cute」で全文検索した結果から最新10件を表示してみました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script> <script type="text/javascript" src="/content/lib/jquery/jyoutube.js"></script> <script type="text/javascript"> $(function(){ $.getJSON('http://gdata.youtube.com/feeds/base/videos?q=hamster%2Bcute&client=ytapi-youtube-search&v=2&alt=json-in-script&callback=?&max-results=10', function(data) { $.each(data.feed.entry, function(i, item) { var title = item['title']['$t']; var video = item['id']['$t']; var video_ary = video.split("video:"); var vid=video_ary[video_ary.length-1]; var thumb="http://img.youtube.com/vi/"+vid+"/2.jpg"; video = video.replace('http://gdata.youtube.com/feeds/videos/','http://www.youtube.com/watch?v='); $('#results').append('<li><a href="http://www.youtube.com/watch?v='+vid+'"><img src="'+thumb+'" width="60" />'+title+'</a></li>'); }); }); }); </script> <!-- CSS --> <style type="text/css"> ul { margin:0; paddng:0; list-style:none; } li { margin:0 0 5px 0; padding:0; list-style:none; } li a { text-decoration:none; } li a:hover { color:blue; } li img { vertical-align:middle; border:1px solid #000; margin:0 10px 0 0; padding:0; } </style> </head> <body> <h1>設置サンプル</h1> <p>参照:<a href='http://www.youtube.com/rssls?gl=JP&hl=ja'>YouTube:RSSについて</a></p> <p>YouTube動画:「hamster+cute」で全文検索した結果から最新10件を表示。</p> <!-- CODE --> <ul id="results"></ul> <!-- / CODE --> </body> </html>
また、RSSフィード内には、コンテンツ情報のHTML文(テーブルレイアウト)も含まれています。 このコンテンツ情報には、サムネイル、タイトル、レーティングなどひと通り入っていますので、そのまま出力すれば下図のような表示が簡単に行えます。
▼下記のサンプルでは「hamster+cute」で全文検索した結果から最新5件のコンテンツ情報を表示しています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script> <script type="text/javascript" src="/content/lib/jquery/jyoutube.js"></script> <script type="text/javascript"> $(function(){ $.getJSON('http://gdata.youtube.com/feeds/base/videos?q=hamster%2Bcute&client=ytapi-youtube-search&v=2&alt=json-in-script&callback=?&max-results=10', function(data) { $.each(data.feed.entry, function(i, item) { var title = item['title']['$t']; var video = item['id']['$t']; var video_ary = video.split("video:"); var vid=video_ary[video_ary.length-1]; var thumb="http://img.youtube.com/vi/"+vid+"/2.jpg"; video = video.replace('http://gdata.youtube.com/feeds/videos/','http://www.youtube.com/watch?v='); $('#results').append('<li><a href="http://www.youtube.com/watch?v='+vid+'"><img src="'+thumb+'" width="60" />'+title+'</a></li>'); }); }); }); </script> <!-- CSS --> <style type="text/css"> ul { margin:0; paddng:0; list-style:none; } li { margin:0 0 5px 0; padding:0; list-style:none; } li a { text-decoration:none; } li a:hover { color:blue; } li img { vertical-align:middle; border:1px solid #000; margin:0 10px 0 0; padding:0; } </style> </head> <body> <h1>設置サンプル</h1> <p>参照:<a href='http://www.youtube.com/rssls?gl=JP&hl=ja'>YouTube:RSSについて</a></p> <p>YouTube動画:「hamster+cute」で全文検索した結果から最新10件を表示。</p> <!-- CODE --> <ul id="results"></ul> <!-- / CODE --> </body> </html>
YouTube Chromeless Video Player
クロムレスプレーヤー埋め込みプラグイン
2011/1/10
YouTube Chromeless Video Player
YouTube JavaScript Player APIとjQueryを使用して、指定したYouTube動画をクロムレスプレーヤーで埋め込むjQueryプラグイン。 WatchページのURLをリンクで指定するだけで簡単に埋め込むことができます。 同一ページに複数のプレーヤーを設置することも可能です。 動画の埋め込みにはSWFObjectが使用されています。
再生・一時停止ボタン、ステータスバー、ミュートON/OFFボタンは1枚画像になっており、プレーヤーの見た目をカスタムできるようになっています。
▼head要素内に記述
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' ></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>
<script type='text/javascript' src='path/to/jquery.ytchromeless.js'></script>
<script type='text/javascript'>
$(function(){
$('.video-link').ytchromeless();
});
</script>
▼body要素内に記述
<a class='video-link' href='http://www.youtube.com/watch?v=動画ID'>動画タイトル</a> 例) <a class='video-link' href='http://www.youtube.com/watch?v=9YEEl52u8XE'>寝てるとこ</a> <a class='video-link' href='http://www.youtube.com/watch?v=8e_wXc0m97w'>うろうろ</a>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <script type="text/javascript" src="/content/lib/jquery/jquery.ytchromeless.js"></script> <script type="text/javascript"> $(function(){ $('a.video-link').ytchromeless(); }); </script> <!-- CSS --> <style type="text/css"> .video-player { margin:20px; width:300px; } .video-controls { background:#dedede; height:30px; margin:-4px 0 0; position:relative; width:300px; } .status { height:20px; left:30px; position:absolute; top:5px; width:115px; } .bar { background:#a4a4a4; height:10px; position:relative; top:5px; } .loaded { background:#bbb; height:10px; left:0; position:absolute; top:0; } .indicator { background:#212121; display:block; height:10px; left:0; position:absolute; top:0; width:20px; } .play-pause, .volume { background:url(/content/img/ajax/btn-controls.png) no-repeat; display:block; height:20px; overflow:hidden; position:absolute; text-indent:-9999px; top:5px; width:20px; } .play-pause { left:5px; } .playing { background-position:0 -20px; } .volume { background-position:0 -60px; right:110px; } .muted { background-position:0 -40px; } .view-youtube { color:#000; display:block; float:right; font-size:9px; line-height:30px; padding:0 5px 0 0; text-decoration:none; text-transform:uppercase; letter-spacing:-1px; } </style> </head> <body> <h1>設置サンプル</h1> <p>参照:<a href='http://www.viget.com/inspire/youtube-chromeless-video-jquery-plugin/' target='_blank'>YouTube Chromeless Video Player</a></p> <!-- CODE --> <a class="video-link" href="http://www.youtube.com/watch?v=9YEEl52u8XE">寝てるとこ</a> <a class="video-link" href="http://www.youtube.com/watch?v=8e_wXc0m97w">うろうろ</a> <!-- / CODE --> </body> </html>
jQuery Youtube playlist plugin
カスタマイズ性に富んだオリジナルの再生リストが作れる
2011/1/10
jQuery Youtube playlist plugin
YouTube JavaScript Player APIとjQueryを使用して、指定し動画を切替形式あるいはギャラリー形式で表示するjQueryプラグイン。 WatchページのURLをリンクで指定するだけで簡単に埋め込むことができます。
パラメータで動画の幅・高さ、テキストリンクまたはサムネイル付きリンクの有無、自動再生の有無、インライン再生の有無などが指定できるのでプレーヤの細かなカスタマイズが可能です。 切替形式の場合も同一ページ内に複数のセットを設置することが可能です。
▼head要素内
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' ></script>
<script type='text/javascript' src='path/to/jquery.youtubeplaylist.js'></script>
<script type='text/javascript'>
$(function(){
$('#demo1').ytplaylist();
});
</script>
▼head要素内
<div class='yt_holder'>
<div id='ytvideo'></div>
<ul id='demo1'>
<li><a href='http://www.youtube.com/watch?v=8e_wXc0m97w'>うろうろ</a></li>
<li><a href='http://www.youtube.com/watch?v=GILIk8W00s4'>布団にもぐるところ</a></li>
<li><a href='http://www.youtube.com/watch?v=9YEEl52u8XE'>寝てるとこ</a></li>
</ul>
</div>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script> <script type="text/javascript" src="/content/lib/jquery/jquery.youtubeplaylist.js"></script> <script type="text/javascript"> $(function(){ $("ul#demo1").ytplaylist(); $("ul#demo2").ytplaylist({ addThumbs:true, autoPlay:false, holderId:'ytvideo2' }); $.getJSON( "http://gdata.youtube.com/feeds/api/users/cocoism3/favorites", { alt:"json" }, function(xml) { var feed = xml.feed; var s=''; $.each(feed.entry, function(i,item){ var tmp=item.id.$t.split("videos/"); var vid=tmp[tmp.length-1]; s+='<li><a href="http://www.youtube.com/watch?v='+vid+'"></a></li>'; }); $("ul#demo3").append(s).ytplaylist({ addThumbs:true, autoPlay:false, playerWidth:'240', playerHeight:'180', thumbSize:'small', showInline:true }); } ); }); </script> <!-- CSS --> <style type="text/css"> #ytvideo, #ytvideo2 { float:left; margin-right:10px; } .yt_holder { background:#f3f3f3; padding:10px; float:left; border:1px solid #e3e3e3; margin-bottom:15px; } .yt_holder ul { float:left; margin:0; padding:0; width:220px; } .yt_holder ul li { list-style-type:none; display:block; background:#f1f1f1; float:left; width:216px; margin-bottom:5px; padding:2px; } .yt_holder ul li img { width:120px; float:left; margin-right:5px; border:1px solid #999; } .yt_holder ul li a { font-family:georgia; text-decoration:none; display:block; color:#000; } .yt_holder .currentvideo { background:#e6e6e6; } .yt_holder3 ul { margin:0; padding:0; list-style:none; } .yt_holder3 ul li { width:240px; height:180px; list-style:none; float:left; margin:0 10px 10px 0; padding:0; overflow:hidden; background:#e5e5e5; } .yt_holder3 ul li a { text-decoration:none; display:block; border:none; } .yt_holder3 ul li img { border:none; width:240px; height:180px; } .yt_holder3 .currentvideo { background:#bbb; } </style> </head> <body> <h1>設置サンプル</h1> <p>参照:<a href='http://www.micc.unifi.it/ferracani/blog/web-applications/jquery-youtube-playlist-plugin/' target='_blank'>jQuery Youtube playlist plugin</a></p> <!-- CODE --> <h2>指定した動画を切替表示(テキストリンク)</h2> <div class="yt_holder"> <div id="ytvideo"></div> <ul id="demo1"> <li><a href="http://www.youtube.com/watch?v=8e_wXc0m97w">うろうろ</a></li> <li><a href="http://www.youtube.com/watch?v=GILIk8W00s4">布団にもぐるところ</a></li> <li><a href="http://www.youtube.com/watch?v=9YEEl52u8XE">寝てるとこ</a></li> </ul> </div> <br clear="all" /> <h2>指定した動画を切替表示(サムネイル付きリンク)</h2> <div class="yt_holder"> <div id="ytvideo2"></div> <ul id="demo2"> <li><a href="http://www.youtube.com/watch?v=8e_wXc0m97w">うろうろ</a></li> <li><a href="http://www.youtube.com/watch?v=GILIk8W00s4">布団にもぐるところ</a></li> <li><a href="http://www.youtube.com/watch?v=9YEEl52u8XE">寝てるとこ</a></li> </ul> </div> <br clear="all" /> <h2>ギャラリー</h2> <p>お気に入り登録している動画フィードを取得して表示してみました。</p> <div class="yt_holder3"> <ul id="demo3"></ul> </div> <br clear="all" /> <!-- / CODE --> </body> </html>
jQuery YouTube Plugin
任意のキーワードでのYouTube動画検索結果をWebページに表示
2011/1/10
jQuery YouTube Plugin
任意のキーワードでのYouTube動画検索結果を簡単にWebページに表示できるjQueryプラグイン。
タイトル、検索キーワード、取得件数、サムネイルの大きさ(small or large)を指定可能です。 検索結果に表示する、動画サムネイルのサイズ、作成者の指定、説明文の長さや、タイトル、説明文、評価、評価数、再生回数の表示・非表示はオプションでカスタマイズ可能です。
▼head要素内に記述
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' ></script> <script type='text/javascript' src='path/to/jquery.youTube.js'></script> <script type='text/javascript'> $(function(){ $('.youtube-videos').youTube({ videoHeader :'YouTube動画検索「オムライス」' //タイトル ,results :5 //取得件数 ,query :'オムライス' //検索キーワード ,orderBy :null //ソート方法 ,author :null //作成者 ,showRatings :false //星印を表示するか(CSSのクラスで各レベルに応じた星を用意 00,05,10,15,20,25,30,35,40,45,50) ,showNumRatings :true //評価の実数を表示するか ,showViews :true 再生回数を表示するか ,showDescription :true //動画の説明文を表示するか ,descriptionLength :150 //説明文の長さ ,thumbnail :'small' //サムネイルサイズ(small:120x90またはlarge:480x360) }); }); </script>
▼body要素内に記述
<div class='youtube-videos'></div>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript" src="/content/lib/jquery/jquery.youTube.js"></script> <script type="text/javascript"> $(function(){ $('.youtube-videos').youTube({ videoHeader : 'YouTube動画検索「オムライス」' ,results : 5 /* number of results to return / display */ ,query : 'オムライス' ,orderBy : null /* what to order the results by */ ,author : null /* author of the video */ ,showRatings : false /* Display the rating stars assigns a class of 00,05,10,15,20,25,30,35,40,45,50 */ ,showNumRatings : true /* Displays the actual number of ratings */ ,showViews : true /* show number of views for the video */ ,showDescription : true /* show a clipped version of the video description */ ,descriptionLength : 150 /* length of the description to bring back, will append ... to the end */ ,thumbnail : 'small' /* small: 120x90 | large: 480 x 360 */ }); }); </script> <!-- CSS --> <style type="text/css"> p { margin:0; padding:0; } .video-item { margin:10px; padding:0; width:120px; float:left; } .video-thumb { margin:0; padding:0; } .video-info { margin:0; padding:0; } .video-desc { margin:0; padding:0; } .video-info div { margin:0; padding:0; } </style> </head> <body> <h1>設置サンプル</h1> <p>参照:<a href='http://www.webdevkungfu.com/jquery-youtube-plugin/' target='_blank'>jQuery YouTube Plugin</a></p> <!-- CODE --> <div class="youtube-videos"></div> <br clear="all" /> <!-- / CODE --> </body> </html>
jQuery YouTube TubePlayer Plugin
プレーヤーのコントロール制御と各種イベント発生時のコールバックが用意されている
2011/1/11
jQuery YouTube TubePlayer Plugin
YouTubeプレーヤーに簡単に独自のコントロールを付けることができるjQueryプラグイン。 動画の埋め込みには、SWFObjectが使用されています。
カスタマイズできるコントロールには、 再生、一時停止、停止、シーク、音量変更、画質変更、データ検索があります。
プレーヤーの操作により再生、一時停止、ミュートの設定・解除、シーク位置が変更された時や、 プレーヤーの状態が変更された時のイベントが取得できるため、それぞれのタイミングで処理を実行することもできます。 コールバックには、onPlayerUnstarted, onPlayerEnded、onPlayerPlaying、onPlayerPaused、onPlayerBuffering、onPlayerCued、onQualityChange、onErrorNotFound、onErrorNotEmbeddableがあります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <script type="text/javascript" src="/content/lib/jquery/jQuery.tubeplayer.js"></script> <script type="text/javascript"> $(function(){ $("#youtube-player-container").tubeplayer({ width:560, // プレーヤーの幅 height:340, // プレーヤの高さ allowFullScreen:"true", // フルスクリーン再生を許可するか initialVideo:"9YEEl52u8XE", // 動画ID playerID:"youtube-player", // 埋め込み先の要素ID preferredQuality:"default", // 画質(default, small, medium, large, hd720) // プレーヤーが操作された時 onPlay:function(id){updateHTML("動画が再生されました");}, // after the play method is called onPause:function(){updateHTML("動画を一時停止しました");}, // after the pause method is called onStop:function(){updateHTML("動画の再生を停止しました");}, // after the player is stopped onSeek:function(time){updateHTML("シーク位置が変更されました");}, // after the video has been seeked to a defined point onMute:function(){updateHTML("ミュートを設定しました");}, // after the player is muted onUnMute:function(){updateHTML("ミュートが解除されました");}, // after the player is unmuted // プレーヤーの状態が変更された時 onPlayerUnstarted:function(){updateHTML("未再生");}, // when the player returns a state of unstarted onPlayerEnded:function(){updateHTML("再生終了");}, // when the player returns a state of ended onPlayerPlaying:function(){updateHTML("再生中");}, //when the player returns a state of playing onPlayerPaused:function(){updateHTML("一時停止中");}, // when the player returns a state of paused onPlayerBuffering:function(){updateHTML("バッファリング中");}, // when the player returns a state of buffering onPlayerCued:function(){updateHTML("キュー");}, // when the player returns a state of cued onQualityChange:function(quality){updateHTML("画質が変更されました");}, // a function callback for when the quality of a video is determined //エラー onErrorNotFound:function(){updateHTML("動画が見つかりません");}, // if a video cant be found onErrorNotEmbeddable:function(){updateHTML("埋め込みできません");} // if a video isnt embeddable }); function updateHTML(s){ $("#status").html(s); } }); </script> <!-- CSS --> <style type="text/css"> </style> </head> <body> <h1>設置サンプル</h1> <p>参照:<a href='http://www.tikku.com/jquery-youtube-tubeplayer-plugin' target='_blank'>jQuery YouTube TubePlayer Plugin</a></p> <!-- CODE --> <div id='youtube-player-container'></div> <p> <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("play")'>再生</a> <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("pause")'>一時停止</a> <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("stop")'>停止</a> <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("mute")'>ミュート</a> <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("unmute")'>ミュート解除</a> </p> <p>動画のスータス:<span id="status"></span></p> <!-- / CODE --> </body> </html>
YouTubin’ Plugin for jQuery
YouTube動画のURLを指定でプレーヤーをWeb埋め込み
2011/1/11
YouTubin’ Plugin for jQuery
YouTube動画のURLをリンク指定するだけで簡単にWebページにプレーヤーを埋め込めるjQueryプラグイン。 動画の埋め込みには、SWFObjectが使用されています。
オプションで、自動再生の有無、プレーヤーの縦横サイズなども指定可能です。 replaceTimeを指定すると、リンククリックでYouTubeプレーヤーを表示することができます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <script type="text/javascript" src="/content/lib/jquery/jquery.youtubin.js"></script> <script type="text/javascript"> $(function(){ $('#youtube').youtubin({ swfWidth:560, swfHeight:340 }); $('#youtubin-click').youtubin({ swfWidth:560, swfHeight:340, autoplay:false, replaceTime:'click' }); }); </script> <!-- CSS --> </head> <body> <h1>設置サンプル</h1> <p>参考:<a href='http://jonraasch.com/blog/youtubin-jquery-plugin' target='_blank'>YouTubin’ Plugin for jQuery</a></p> <!-- CODE --> <p><a href="http://www.youtube.com/watch?v=8e_wXc0m97w" rel="nofollow" id="youtube">Check out this video</a></p> <p><a href="http://www.youtube.com/watch?v=8e_wXc0m97w" rel="nofollow" id="youtubin-click">クリックでYouTube動画再生<br></a></p> <!-- / CODE --> </body> </html>
Making a Custom YouTube Video Player With YouTube’s APIs
プログレスバーと各種コントロールをカスタマイズできるクロムレスプレーヤーの埋め込み
2011/1/11
Making a Custom YouTube Video Player With YouTube’s APIs
YouTubeの動画URLを指定するだけで、カスタマイズしたクロムレスプレーヤーを設置できるjQueryプラグイン。 動画の埋め込みには、jQuery SWFObject Pluginが使用されています。
プログレスバーはCSSでデザインされており、各種ボタン(再生、リピート、一時停止)は画像をCSSで指定して、プレーヤーの見た目がカスタマイズされています。 オプションで、プレーヤーの幅(高さは幅から自動算出)、プログレスバーの有無(デフォルトは有)を指定可能です。
※playerapiidにYouTubeの動画IDを使用しているので、同一ページ内に同じ動画IDの動画を埋め込むと動作しません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript" src="/content/lib/jquery/jquery.swfobject.1-1-1.min.js"></script> <script type="text/javascript" src="/content/lib/jquery/youTubeEmbed-jquery-1.0.js"></script> <script type="text/javascript"> $(function(){ $('#player1').youTubeEmbed('http://www.youtube.com/watch?v=9YEEl52u8XE'); $('#player2').youTubeEmbed({ video:'http://www.youtube.com/watch?v=8e_wXc0m97w', width:320, // Height is calculated automatically progressBar:false // Hide the progress bar }); $('#player3').youTubeEmbed({ video:'http://www.youtube.com/watch?v=GILIk8W00s4', width:320, // Height is calculated automatically progressBar:true // Hide the progress bar }); }); </script> <!-- CSS --> <style type="text/css"> .flashContainer{ position:relative; overflow:hidden; } .progressBar{ display:none; position:absolute; width:auto; height:8px; left:20px; right:105px; bottom:20px; background-color:#141414; overflow:hidden; cursor:pointer; /* A light CSS3 bottom highlight */ -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3); -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3); box-shadow:0 1px 0 rgba(255, 255, 255, 0.3); } .progressBar .elapsed{ position:absolute; width:0; height:100%; background-color:#1fa2f6; border-right:1px solid #49AFF0; } .controlDiv{ /* Centering the control div */ position:absolute; width:120px; height:120px; cursor:pointer; top:50%; left:50%; margin:-60px 0 0 -60px; } .controlDiv.play{ background:url(/content/img/ajax/play.png) no-repeat center center; } .controlDiv.replay{ background:url(/content/img/ajax/replay.png) no-repeat center center; } .controlDiv.pause{ background:url(/content/img/ajax/pause.png) no-repeat -99999px; } .flashContainer:hover .controlDiv.pause{ background-position:center center; } /* Only show the progress bar when the video is playing */ .flashContainer.playing:hover .progressBar{ display:block; } </style> </head> <body> <h1>設置サンプル</h1> <p>参照:<a href='http://tutorialzine.com/2010/07/youtube-api-custom-player-jquery-css/' target='_blank'>Making a Custom YouTube Video Player With YouTube’s APIs</a></p> <!-- CODE --> <h2>デフォルト</h2> <p id="player1"></p> <h2>プログレスバー無、プレーヤーの幅指定</h2> <p id="player2"></p> <h2>プログレスバー有、プレーヤーの幅指定</h2> <p id="player3"></p> <!-- / CODE --> </body> </html>