Search youtube and display results on my website

javascript html

11,492

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>

11,492

Author by

user3080392

Updated on June 07, 2022

Comments

user3080392 almost 2 years

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>

user3080392 about 10 years

Thanks. The link you gave makes it work. Now I just need to get a widget that plays the video too. How did you know which jquery link to use?