搜索 youtube 并在我的网站上显示结果

Question

如何从我的网站搜索 youtube 并将结果显示在下面的同一页面上？我设法使用以下代码添加了搜索功能：

<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> 

但是，它会打开一个新页面。我也尝试用 iframe 的名称替换“_blank”，但这也不起作用：

<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>

谢谢

我在以下站点遇到了代码。这正是我正在寻找的东西，它似乎应该可以工作，但事实并非如此。任何人都知道代码是错误的吗？ 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>

Answer 1

这是一种方法：

<!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>

Answer 2

jquery.min.js 的链接可能未正确连接。效果很好，只需包含

script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" 在脚本标签中

在页面顶部。 :)