jQueryで指定ユーザーの最新のYoutube動画を表示する方法

Posted: 2012.01.19 / Category: javascript / Tag: API, jQuery
最近では自社のWebサイトにYoutube動画を載せたいといったケースが増えていますね。動画単体だったら公式の埋め込みコードで簡単に表示させることができますが、更新が頻繁にあるとそのつどWebサイトの更新をしなくてはいけないので面倒です。
そこでこの記事ではjQueryで自動的に最新動画を取得する方法をご紹介します。
Sponsored Link
jQueryでYoutubeの指定したチャンネルの最新動画を表示する方法(お手軽版)
URLの確認
YouTube動画の情報は YouTube Data API を利用して取得することができます。
試しにブラウザで次のURLにアクセスしてください。
http://gdata.youtube.com/feeds/api/users/[username]/uploads
[username]の部分は取得したいユーザーネームに置き換えてください。
最新動画のfeed(xml形式)が表示されますね。
json形式で取得
「alt」パラメータを指定することで取得フォーマットを指定することができます。指定できるのは、atom、rss、json です。
jsで利用するにはxmlよりjson形式の方が扱いやすいのでjsonを指定します。
http://gdata.youtube.com/feeds/api/users/[username]/uploads?alt=json
取得件数の指定
「max-results」パラメータで取得する件数を指定することができます。
ここでは3件としておきましょう。
http://gdata.youtube.com/feeds/api/users/[username]/uploads?alt=json&max-results=3
パラメータは他にも色々ありますので詳しくは下記をご覧ください。
リファレンス ガイド: Data API プロトコル
サムネイルを表示して動画にリンクするパターン
あとは「$.getJSON」などで取得するだけです。
htmlで適当なidでマークアップしておきます。
html
<div id="youtube"></div>
javascript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> $(function() { $.getJSON('http://gdata.youtube.com/feeds/api/users/[username]/uploads?alt=json&max-results=3&callback=?', function (json) { var items = json.feed.entry; $.each(items,function(i){ $('#youtube').append('<div>'+ '<h3>'+ items[i].title.$t + '</h3>'+ '<a href="'+ items[i].link[0].href +'" target="_blank"><img src="'+items[i].media$group.media$thumbnail[0].url+'" /></a>' + '</div>'); }); }); }); </script>
サムネイルは結構大きなサイズが取得されるので適当なサイズを指定するか、thumbnail[1]などに変更すると小さめの他のサムネイルになります。
動画を直接再生するパターン
iframeで埋め込んでその場で再生するパターンもやってみます。
javascript
$(function() { $.getJSON('http://gdata.youtube.com/feeds/api/users/[username]/uploads?alt=json&max-results=3&callback=?', function (json) { var items = json.feed.entry; $.each(items,function(i){ var id = items[i].id.$t.replace('http://gdata.youtube.com/feeds/api/videos/',''); $('#youtube').append('<iframe width="560" height="315" src="http://www.youtube.com/embed/'+id+'?&rel=0" frameborder="0"></iframe>'); }); }); });
「id.$t」だと http から始まる id になるので正規表現で id のみ抜き出しています。
あとは公式の埋め込みコードを利用すればその場で再生できるようになります。
iframeの埋め込みオプションに「rel=0」を指定すれば再生後の関連動画を非表示にできます。
COMMENTS
MasaakiHasebe 2013-01-21 11:16
始めまして、質問をお願いします。
自分のWebページから自分がアップしたYouTubeの特定の動画だけを再生しようと試みています。
貴サイトに紹介されている「サムネイルを表示して動画にリンクするパターン」を試してみました。この場合、YouTubeの動画のURLにリンクする方法と同じように目的の動画だけでなくYouTubeの登録情報や関連動画のサムネイルも出てしまいます。
jQueryを使って目的の動画だけを表示する方法はないでしょうか? 出来ればサムネールは生成しないで、自分で用意したいと思います。出来ればiframeの方式でなく・・・。
以上、宜しくお願いします
webOpixel 2013-01-21 11:45
サンプルを拝見させていただきましたが、うまく表示されているように思えるのですが、、、
サムネイルのソースの「img 」の部分を自分の画像に指定して頂ければ替えられます。
MasaakiHasebe 2013-01-21 23:55
早速、ご返事有難うございました。
Sampleそのものはうまく表示されていますが、小生の望まない無関係なサムネイルのリストが右側に表示されたり、下側に表示したくない情報も出ています。
インターネットで紹介されているVideoLightBoxというソフトを使うと余分なものはなく、指定したVideoだけを表示するコードを生成してくれますが、生成されるコードが複雑すぎるので、貴サイトに紹介されているjQueryコードでそれが可能かと思いましてお願いした次第です。
webOpixel 2013-01-23 14:39
ここで紹介しているのは最新の動画を自動で取得することだけなので、残念ながら、これだけですとLightBoxで表示することはできません。
Haruko 2013-02-07 13:19
この記事にあることを利用して、ワードプレスに最新動画を表示したいと思うのですが、javascriptのことが詳しくわかりません。
javascriptを有効にするプラグインを入れて、
ウィジットにiframeで最新動画を1個だけ表示させたいのですが、
ウィジットにはどう記載すればいいのでしょうか?
こんなことをここで聞くのは大変恐縮なのですが、おとといから2日かけて探し、今日で3日目です。youtube関係のプラグインをいろいろ試してみましたが、最新動画がワードプレスにすぐ更新されなくて困っています。よろしくお願いします。
webOpixel 2013-02-08 10:33
WordPressを使用しないで通常のhtmlで表示することはできていますか?
Haruko 2013-02-08 15:41
通常のHTMLを作って表示させてはいないですが、
http://gdata.youtube.com/feeds/api/users/%5Busername%5D/uploads?alt=json&max-results=3
これにユーザーネームを当てはめると見えますが、通常のHTMLにYoutubeのコードを貼り付けて見えるか確かめればいいのでしょうか?
webOpixel 2013-02-12 15:05
WordPressだと他のプラグインとの関係もあるかもしれないので、なるべくシンプルな状態で一度試した方が原因がわかるかもしれません。
また、WordPressでの使用でしたら下記ページの一番下の方法で設置する必要があります。
http://www.webopixel.net/wordpress/108.html
sion3110 2013-06-03 16:01
ご質問失礼致します。
jQuery初心者です。
記載されたように行ったところ、問題なく表示は出来たのですが、
現在の場合だと動画が縦並びに表示されてしまいます。
横並びにすることは出来ますでしょうか。
また、タイトルが長い場合の文字数制限等は可能でしょうか。
よろしくお願い致します。
webOpixel 2013-06-05 13:00
横並びはdivの部分をはずすとか、cssで「float:left」とかにすればいいと思います。
noname 2014-08-25 10:38
自分の作ったホームページにyoutubeの動画を載せる方法を探していたところ
こちらを見つけ参考にさせていただきました。
教えていただきたいことがあるのですが
items[i].title.$tやitems[i].media$group.media$thumbnail[0].urlなどのパラメータ(?)は
どこから探してくるのでしょうか?
サムネイルなどを違った形式で表示したいのですが
探してもパラメータ一覧などが見つかりません。
webOpixel 2014-08-28 14:15
パラメータ(?)に関してはjsonの部分になりますので、一度アクセスして見てみるといいかもしれません。
「URLの確認」という部分を確認してみてください。
sho0624 2014-09-04 11:02
ご質問させていただきます!
いまご指定通り埋め込みましたら問題なく表示できました。
でも、画面サイズが横長画面のため、上下に黒味がでてしまいます。
それを表示させず、横長のまま埋め込む方法はあるでしょうか?
あと、上のキャプションと画像の行間を詰める場合はどこで設定すればよいでしょうか
タカハマナオキ 2014-10-10 11:10
wordpressで制作している弊社サイトに最新の動画を載せたくて参考にさせて頂いております。
javascriptを読み込むように設定して動画が表示されるようになったのですが、
ズラズラーっとすべての動画が表示されてしまっています。
max-results=1
に設定したのですが、有効になっていないのでしょうか。
YouTube Data API(v2)は 2014 年 3 月 4 日をもって正式にサポートを終了しました
サポートが終了したことも関係がありますか?
よろしくお願いいたします。