在我的網站上搜索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並顯示結果

回答

相關問題