jquery :
Bu kısımda şunları yaptık :
form submit edildiğinde belirlediğimiz inputtaki aranacak kelimeyi aldık.Bu kelimeyi encodeURIComponent ile adres çubuğuna uygun hale getirdik.Ardından da http://gdata.youtube.com/feeds/api/videos?q=kelime&max-results=24&v=2&alt=jsonc&category=Music adresinde arama yaptırdık.Gelen verileri de $.ajax() get fonksiyonuyla alıp,$.each() ile ekrana yazdırdık.
$(document).ready(function() {
$("#muzikara").submit(function() {
$("#video").html('');
var k = $("#kelime").val();
var a = encodeURIComponent(k);
var adres = 'http://gdata.youtube.com/feeds/api/videos?q='+a+'&max-results=24&v=2&alt=jsonc&category=Music';
$.ajax({
type: "GET",
url: adres,
dataType:"jsonp",
success: function(sonuc) {
if(sonuc.data.items) {
$.each(sonuc.data.items, function(i,data) {
var video_id = data.id;
var video_baslik = data.title;
var video_resim = data.thumbnail.sqDefault;
var video_izlenme = data.viewCount;
var final="![]("+video_resim+")
"+video_baslik+"
$("#video").append(final);
});
} else {
$("#video").html("video yok");
}
}
});
});
});
html :
css :
body {background:#86C9EF;font-size:13px;color:#fff;font-family:verdana;}
ul,li {list-style:none;margin:0;padding:0;}
li {float:left;width:120px;padding:5px;background:#fff;height:150px;margin-right:20px;margin-bottom:20px;}
li a{color:#333;font-weight:bold;text-decoration:none;position:relative;}
li a:hover:after{position:absolute;content:attr(title);font-size:10px;left:110px;top:-40px;background:#333;color:#fff;z-index:9999;padding:2px;line-height:18px;width:120px;}
#muzikara,#video {margin-top:20px;margin-left:20px;width:700px;}
input[type=text] {padding:5px;border:2px solid #222;background:#fff;font-size:18px;font-weight:bold;width:300px;}
input[type=submit] {padding:5px;background:#333;cursor:pointer;color:#fff;border:0;font-size:18px;font-weight:bold;}
Demo için tıklayınız,dosyayı indirip incelemek için tıklayınız.
Kaynak : http://blog.ozergul.net/youtubedan-json-ile-video-cekimi-jquery-ajax.html
Sorularınızı varsa sorabilirsiniz.
