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="" 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="" 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?

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function SearchYouTube(query) {
$.ajax({
    url: ';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>

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

• javascript
• html

Share Improve this question Follow edited Feb 15, 2014 at 15:29 user3080392 asked Feb 14, 2014 at 3:38 user3080392user3080392 1,24455 gold badges1919 silver badges3737 bronze badges 3

• You need to make AJAX calls to do this. – user1864610 Commented Feb 14, 2014 at 3:40
• @MikeW ANd what about the same origin policy? – epascarello Commented Feb 14, 2014 at 3:46
• See boss.yahoo. – epascarello Commented Feb 14, 2014 at 3:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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./ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script src="https://apis.google./js/client.js?onload=googleApiClientReady">   </script>
</body>
</html>

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

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

on top of the page. :)