Youtube Instant Search with Jquery

HTML

<div align="center">    <div id="input_box">  <h2>Youtube Instant Search with Jquery(<a href="http://www.9lessons.info/2010/09/youtube-instant-search-with-jquery-and.html">tutorial link</a>)</h2>    <input type="text" class='search_input'  /><br/>    </div>   <div id="video">    </div>     </div>

CSS

body { background-color:#86c9ef; color:#000; font-family:'Georgia', Times New Roman, Times, serif }   .search_input {   border:2px solid #333; font-size:20px; padding:5px; width:350px; font-family:'Georgia', Times New Roman, Times, serif; -moz-border-radius:5px;-webkit-border-radius:5px;     } #input_box { text-align:left;   } #result { background-color:#000; margin-top:25px; min-height:230px; width:340px; border:solid 10px #ffffff; float:left; margin-left:10px;   -moz-border-radius:9px; -webkit-border-radius:9px; overflow:hidden; overflow:auto;   } #video { background-color:#000;     } #no { padding:30px; font-size:24px; color:#fff;   }   #title { background-color:#fff; font-size:16px; text-align:left; padding-bottom:8px; height:30px;   } #count { background-color:#fff; text-align:left; padding-top:8px; }

JavaScript

$(document).ready(function() {
    $(".search_input").focus();
    $(".search_input").keyup(function(e) {
        if (e.keyCode === 13) {
            $("#video").html('');
            var search_input = $(this).val();
            var keyword = encodeURIComponent(search_input);

            var yt_url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&type=channel&maxResults=20&q=' + keyword + '&key=AIzaSyC_ohHKAeZdfKHpQDBEW_JBPkKu641t2eM';
            $.ajax({
                type: "GET",
                url: yt_url,
                dataType: "jsonp",
                success: function(response) {
                    if (response.items.snippet) {



                        $.each(response.items.snipper, function(i, data) {
                            var video_id = data.id;
                            var video_title = data.title;
                            var video_viewCount = data.viewCount;
                            var video_frame = "<iframe width='340' height='200' src='http://www.youtube.com/embed/" + video_id + "' frameborder='0' type='text/html'></iframe>";
                            var final = "<div id='result'><div>" + video_frame + "</div><div id='title'>" + video_title + "</div></div>";
                            $("#video").append(final);
                        });
                    }
                    else {
                        $("#video").html("<div id='no'>No Video</div>");
                    }
                }
            });
        }
    });


});