Menu
How do I search youtube from my site and display the results on the same page underneath? I have managed to add a search feature with the following code:
<form action="http://www.youtube.com/results" method="get" target="_blank">
<input name="search_query" type="text" maxlength="128" />
</select>
<input type="submit" value="Search" />
</form>
However, it opens a new page. I have also tried to replace the "_blank" with the name of an iframe, but that didn't work either:
<form action="http://www.youtube.com/results" method="get" target="iframe_a">
<input name="search_query" type="text" maxlength="128" />
</select>
<input type="submit" value="Search" />
</form>
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
Thanks
I came across the code at the following site. It just what I'm looking for and it seems like it should work, but it doesn't. Anyone have an idea of were the code is wrong? http://codeapi.blogspot.com/search/label/Video%20Widget
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function SearchYouTube(query) {
$.ajax({
url: 'http://gdata.youtube.com/feeds/mobile/videos?alt=json-in-script&q=' + query,
dataType: 'jsonp',
success: function (data) {
var row = "";
for (i = 0; i < data.feed.entry.length; i++) {
row += "<div class='search_item'>";
row += "<table width='100%'>";
row += "<tr>";
row += "<td vAlign='top' align='left'>";
row += "<a href='#' ><img width='120px' height='80px' src=" + data.feed.entry[i].media$group.media$thumbnail[0].url + " /></a>";
row += "</td>";
row += "<td vAlign='top' width='100%' align='left'>";
row += "<a href='#' ><b>" + data.feed.entry[i].media$group.media$title.$t + "</b></a><br/>";
row += "<span style='font-size:12px; color:#555555'>by " + data.feed.entry[i].author[0].name.$t + "</span><br/>";
row += "<span style='font-size:12px' color:#666666>" + data.feed.entry[i].yt$statistics.viewCount + " views" + "<span><br/>";
row += "</td>";
row += "</tr>";
row += "</table>";
row += "</div>";
}
document.getElementById("search-results-block").innerHTML = row;
},
error: function () {
alert("Error loading youtube video results");
}
});
return false;
}
</script>
<input type="text" id="queryinput" />
<input type="submit" value="Search"
onclick="javascript:SearchYouTube(document.getElementById('queryinput').value)" />
<div id="search-results-block"></div>
264
Here's one way:
<!doctype html>
<html>
<head>
<title>Search</title>
</head>
<body>
<div id="buttons">
<label> <input id="query" value='cats' type="text"/><button id="search-button" onclick="keyWordsearch()">Search</button></label>
<div id="container">
<h1>Search Results</h1>
<ul id="results"></ul>
</div>
<script>
function keyWordsearch(){
gapi.client.setApiKey('api_key_here');
gapi.client.load('youtube', 'v3', function(){
makeRequest();
});
}
function makeRequest(){
var q = $('#query').val();
var request = gapi.client.youtube.search.list({
q: q,
part: 'snippet',
maxResults: 10
});
request.execute(function(response) {
$('#results').empty()
var srchItems = response.result.items;
$.each(srchItems, function(index, item){
vidTitle = item.snippet.title;
vidThumburl = item.snippet.thumbnails.default.url;
vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No Image Available." style="width:204px;height:128px"></pre>';
$('#results').append('<pre>' + vidTitle + vidThumbimg + '</pre>');
})
})
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"> </script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With