YouTube APIとjQuery

解説記事を読んだせいもあってjQueryの表記に少しだけ慣れた。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>title</title>
	<script type="text/javascript" src="jquery-1.7.1.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#frmSearch").submit(function(){
				search($("#keyword").val());
				return false;
			});
		});

		function search(keyword) {
			$("#videos").text("Loading...");

			$.ajax({
				dataType: "jsonp",

				data: {
					"vq": keyword,
					"max-results":"10",
					"alt":"json-in-script"
				},

				cache: true,
				url: "http://gdata.youtube.com/feeds/api/videos",
				success: function (data) {
					$("#videos").empty();
					$.each(data.feed.entry, function(i,item){
						var group = item.media$group;

						$("<a/>")
						.attr("href", group.media$player[0].url)
						.append("<img src='" + group.media$thumbnail[0].url + "'/>")
						.appendTo("#videos");
					});
				}
			});
		}
	</script>
</head>
<body>
<form id="frmSearch">
	<input type="text" id="keyword">
	<input type="submit" value="検索">
</form>
<div id="videos"></div>
</body>
</html>

参考サイト