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

Posted: 2012.01.19 / Category: javascript / Tag: API, jQuery

最近では自社のWebサイトにYoutube動画を載せたいといったケースが増えていますね。動画単体だったら公式の埋め込みコードで簡単に表示させることができますが、更新が頻繁にあるとそのつどWebサイトの更新をしなくてはいけないので面倒です。
そこでこの記事ではjQueryで自動的に最新動画を取得する方法をご紹介します。

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 日をもって正式にサポートを終了しました
サポートが終了したことも関係がありますか？
よろしくお願いいたします。