makotoworld/gist:2223903

## gistfile1.txt
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7.1");</script>
<script type="text/javascript">google.load("jqueryui", "1.8.18");</script>
<script type="text/javascript">
$(function() {
    // 掲載数
    var i = 12;

    //Youtube
    url = "http://gdata.youtube.com/feeds/api/videos?";
    url += "?q=" + "しゅわえもん広場"; //キーワード
    url += "&author=" + "shuwaemon"; //ユーザー名
    url += "&orderby=" + "published"; //並び順
    url += "&start-index=" + "1"; //表示位置(11番目から10個)
    url += "&max-results=" + "12"; //表示順
    url += "&v=" + "2"; //APIバージョン
    url += "&alt=" + "json"; //出力ファイル指定
    url += "&time=" + "all_time"; //投稿日範囲

    $.getJSON(url, function (json) {
        var items = json.feed.entry;
        $.each(items,function(i){
            $('div#content').append('<div id="sub" name="'+
                items[i].title.$t + '">'+
                '<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>');
        });
    });

//    while(i > 0){
//        $('div#content').prepend('<div id="sub" name="sub' + i + '">Youtube画像をここにおく。<b>('+ i +')</b></div>');
//        i--;
//    }

    $("div#sub").click(function(){
        var title = $(this).attr("name");
        $("div#player").html("<h1>" + title+ "の動画</h1>");
    });

});

</script>

<style type="text/css">

#content {
    background-color:#ddeeff;
    width: 600px;
}
#player{
    background-color:#226699;
    width:480px;
    height:360px;
    margin:0;
}
h1{
    margin:0;
    padding:10px;
}
#sub {
    background-color:#aabbcc;
    width: 120px;
    height: 90px;
    margin: 5px;
    float:left;
}
</style>

</head>

<body>
<div id="player">
ここにプレイヤーをおく。
</div>
<p>見たい動画をクリックしてね。</p>
<div id="content">
</div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script type="text/javascript">google.load("jquery", "1.7.1");</script>
	<script type="text/javascript">google.load("jqueryui", "1.8.18");</script>
	<script type="text/javascript">
	$(function() {
	// 掲載数
	var i = 12;

	//Youtube
	url = "http://gdata.youtube.com/feeds/api/videos?";
	url += "?q=" + "しゅわえもん広場"; //キーワード
	url += "&author=" + "shuwaemon"; //ユーザー名
	url += "&orderby=" + "published"; //並び順
	url += "&start-index=" + "1"; //表示位置(11番目から10個)
	url += "&max-results=" + "12"; //表示順
	url += "&v=" + "2"; //APIバージョン
	url += "&alt=" + "json"; //出力ファイル指定
	url += "&time=" + "all_time"; //投稿日範囲

	$.getJSON(url, function (json) {
	var items = json.feed.entry;
	$.each(items,function(i){
	$('div#content').append('<div id="sub" name="'+
	items[i].title.$t + '">'+
	'<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>');
	});
	});

	// while(i > 0){
	// $('div#content').prepend('<div id="sub" name="sub' + i + '">Youtube画像をここにおく。<b>('+ i +')</b></div>');
	// i--;
	// }

	$("div#sub").click(function(){
	var title = $(this).attr("name");
	$("div#player").html("<h1>" + title+ "の動画</h1>");
	});

	});

	</script>

	<style type="text/css">

	#content {
	background-color:#ddeeff;
	width: 600px;
	}
	#player{
	background-color:#226699;
	width:480px;
	height:360px;
	margin:0;
	}
	h1{
	margin:0;
	padding:10px;
	}
	#sub {
	background-color:#aabbcc;
	width: 120px;
	height: 90px;
	margin: 5px;
	float:left;
	}
	</style>

	</head>

	<body>
	<div id="player">
	ここにプレイヤーをおく。
	</div>
	<p>見たい動画をクリックしてね。</p>
	<div id="content">
	</div>
	</body>
	</html>