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

如何从我的网站搜索youtube并在下面的同一页面上显示结果？我已成功添加以下代码的搜索功能：在我的网站上搜索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>

但是，它会打开一个新页面。我也试图取代“_blank”与iframe的名字，但没有工作，要么：

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

来源

2014-02-14 user3080392

你需要作出AJAX调用来做到这一点。 – 2014-02-14 03:40:48

@MikeW和同一产地政策呢？ – epascarello

请参阅http://boss.yahoo.com/ – epascarello

这里有一种方法：

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

来源

2014-11-21 21:31:43 user3080392

到jquery.min.js链接可能未正确连接。它的作品好只是包括

SCRIPT SRC = “// ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js” 脚本标签

在页面的顶部。 :)

来源

2014-02-20 05:35:26 varma

谢谢。你给的链接使它工作。现在我只需要获取播放视频的小部件。你怎么知道使用哪个jQuery链接？ – user3080392

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

回答

相关问题