Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save landsurveyorsunited/a7a2089a0bf43698a4e1 to your computer and use it in GitHub Desktop.
Save landsurveyorsunited/a7a2089a0bf43698a4e1 to your computer and use it in GitHub Desktop.
A Pen by JFarrow.
<div class="arama">
<form action="" onsubmit="return false">
<h2>Youtube API jQuery AutoComplete</h2>
<div class="ui-widget">
<label for="youtube">Search Youtube: </label>
<input id="youtube" />
<button id="submit">FIND</button>
</div>
</form>
</div>
<div id="sonuc"></div>
/* AutoComplete */
$("#youtube").autocomplete({
source: function(request, response){
/* google geliştirici kimliği (zorunlu değil) */
var apiKey = 'AI39si7ZLU83bKtKd4MrdzqcjTVI3DK9FvwJR6a4kB_SW_Dbuskit-mEYqskkSsFLxN5DiG1OBzdHzYfW0zXWjxirQKyxJfdkg';
/* aranacak kelime */
var query = request.term;
/* youtube sorgusu */
$.ajax({
url: "http://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1&q="+query+"&key="+apiKey+"&format=5&alt=json&callback=?",
dataType: 'jsonp',
success: function(data, textStatus, request) {
response( $.map( data[1], function(item) {
return {
label: item[0],
value: item[0]
}
}));
}
});
},
/* seçilene işlem yapmak için burayı kullanabilirsin */
select: function( event, ui ) {
$.youtubeAPI(ui.item.label);
}
});
/* Butona Basınca Arama */
$('button#submit').click(function(){
var value = $('input#youtube').val();
$.youtubeAPI(value);
});
/* Youtube Arama Fonksiyonu */
$.youtubeAPI = function(kelime){
var sonuc = $('#sonuc');
sonuc.html('Arama gerçekleştiriliyor...');
$.ajax({
type: 'GET',
url: 'http://gdata.youtube.com/feeds/api/videos?q=' + kelime + '&max-results=15&v=2&alt=jsonc',
dataType: 'jsonp',
success: function( veri ){
if( veri.data.items ){
sonuc.empty();
$.each( veri.data.items, function(i, data) {
sonuc.append('<div class="youtube">\
<img src="' + data.thumbnail.sqDefault + '" alt="" />\
<h3><a href="javascript:void(0)" onclick="$.youtubePlay(\'' + data.id + '\', \'' + data.content[5] + '\')">' + data.title + '</a></h3>\
<p>' + data.description + '</p>\
</div>\
<div class="youtubeOynat" id="' + data.id + '"></div>');
});
}
else {
sonuc.html('<div class="hata"><strong>' + kelime + '</strong> ile ilgili hiç video bulunamadı!</div>');
}
}
});
}
/* Youtube Video Oynatma Fonksiyonu */
$.youtubePlay = function(yid, frame){
$('.youtubeOynat').slideUp().empty();
$('#'+yid).slideDown().html('<iframe src="'+ frame +'&autoplay=1" style="width: 100%; box-sizing: border-box; height: 300px" />');
}
* { padding: 0; margin: 0; list-style: none; font-family: Arial }
.youtubeOynat { display: none; background: #ddd; padding: 10px }
.youtube {
border: 1px solid #ddd;
padding: 10px;
margin: 10px;
overflow: hidden
}
.youtube img {
float: left;
margin-right: 15px
}
.youtube a {
text-decoration: none;
color: darkred
}
.youtube p {
padding-top: 10px
}
.arama {
padding: 10px
}
.arama h2 {
font-weight: normal;
padding-bottom: 10px
}
.hata {
margin: 10px;
background-color: darkred;
color: #fff;
font-size: 12px;
padding: 5px
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment