youtube with ajax

youtubeのＡＰＩをgetJSONメソッドで使ってみよう！

好きなユーザーのチャンネルの動画を新着から3件表示

練習問題

ＨＴＭＬ

youtube　apiのたたき方。

  • 'http://gdata.youtube.com/feeds/api/users/ここにユーザー名/uploads?alt=json&max-results=3&callback=?'

  • max-ressults=(表示させたい件数)

jsコード

$.getJSON('http://gdata.youtube.com/feeds/api/users/表示させたいユーザー名/uploads?alt=json&max-results=表示させたい件数&callback=?', function (json) {
		var items = json.feed.entry;
		$.each(items,function(i){
			$('#show_youtube').append('
'+
				'
'+ items[i].title.$t + '
'+
				'' +
			'
');
		});
	});

自分のページで再生させてみよう！

iframeで埋め込んでみる

ｊｓコード

    $.getJSON('http://gdata.youtube.com/feeds/api/users/ユーザー名/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_play').append('');
            });
        });

もっと見栄えを整えたいとか機能を充実させたい方はhttp://wiz-code.digick.jp/blog/?p=846とか リファレンス ガイド: Data API プロトコルをみて研究してみよう！

上へ