CODEWITHSUNDEEP
javascripthtml
user3080392
user3080392

Reputation: 1224

Search youtube and display results on my website

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>

Upvotes: 3

Views: 14740

Answers (2)

user3080392
user3080392

Reputation: 1224

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>

Upvotes: 2

varma
varma

Reputation: 1

The link to jquery.min.js might be not connected correctly. it works good just include

script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" in script tag

on top of the page. :)

Upvotes: 0

Related Questions