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/v...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="<li><a title='"+video_izlenme+" izlenme' id='muzik"+video_id+"' href='http://youtube.com/watch?v="+video_id+"'><img src='"+video_resim+"' />"+video_baslik+"</a></li>";
$("#video").append(final);
});
} else {
$("#video").html("<div id='video_yok'>video yok</div>");
}
}
});
});
});html :
<form id="muzikara" onsubmit="return false">
<input type="text" id="kelime" />
<input type="submit" id="ara" value="ara"/>
</form>
<div id="alan">
<ul id="video"> </ul>
</div>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-j...uery-ajax.html
Sorularınızı varsa sorabilirsiniz.
