YouTube Data API (JSONP) 1

by dirkk0

HTML

<div id="control">
    <div>
    <input type="text" id="query" value="vai" />
    <input type="submit" value="search" onClick="search()">
</div>
</div>

<div id="result">
</div>

CSS

body { margin: 0; padding: 4em 0 0;}
#control{
    position: fixed;
    top: 0;
    width: 100%; 
    height: auto;
    background: #000;
}


#control>div{padding: 10px; }

JavaScript

function search() {
    document.getElementById("result").innerHTML = "loading...";
    var query = document.getElementById("query").value;
    query = encodeURIComponent(query);
    var jsonpURL = "http://gdata.youtube.com/feeds/videos?vq=" + query + "&max-results=50&alt=json-in-script&callback=listVideos";
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = jsonpURL;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(script);
}

function listVideos(data) {
    var html = '';
    if (data.feed.openSearch$totalResults.$t > 0) {
        var entries = data.feed.entry;
        for (var i = 0; i < entries.length; i++) {
            html += entries[i].content.$t;
        }
    } else {
        html += "<p>not found</p>";
    }
    document.getElementById("result").innerHTML = html;
}