JSFiddle - React, Tailwind, and code Playground

HTML

<h2><a href="http://blog.ozergul.net/youtubedan-json-ile-video-cekimi-jquery-ajax.html">Youtube'dan Json ile Video Çekme - Blog.Ozergul.Net</a></h2>
<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>
<div id="clear:both"> </div>
<span id="oynat"></span>

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;}

JavaScript

$(document).ready(function() {

	
	
	$("#muzikara").keyup(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 href='#'  class='tikla' title='"+video_izlenme+" izlenme' id='muzik"+video_id+"'><img src='"+video_resim+"' />"+video_baslik+"</a></li>";
				$("#video").append(final);
			
				});
			} else {
				$("#video").html("<div id='video_yok'>video yok</div>");
			}
		}
		});
	});
	

		
	
});