Simple youtube javascript api 3 request not works

Question

i've tried to write a simple youtube request to search video with youtube javascript api v3.

This is the source code:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">

       function showResponse(response) {
           var responseString = JSON.stringify(response, '', 2);
           document.getElementById('response').innerHTML += responseString;
        }

       // Called automatically when JavaScript client library is loaded.
       function onClientLoad() {
          gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
       }

       // Called automatically when YouTube API interface is loaded
      function onYouTubeApiLoad() {
        // This API key is intended for use only in this lesson.
        gapi.client.setApiKey('API_KEY');

        search();
       }

       function search() {
         var request = gapi.client.youtube.search.list({
             part: 'snippet',
             q:'U2'

        });

        // Send the request to the API server,
        // and invoke onSearchRepsonse() with the response.
        request.execute(onSearchResponse);
    }

    // Called automatically with the response of the YouTube API request.
    function onSearchResponse(response) {
        showResponse(response);
    }


    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="https://apis.google.com/js/client.js?onload=onClientLoad" type="text/javascript"></script>
</head>
<body>
    <pre id="response"></pre>
</body>
</html>

When i load this page on google chrome (updated), nothing happens, the page remains blank. I have request the API Key for browser apps (with referers) and copied in the method gapi.client.setApiKey.

Anyone can help me?

Thanks

Also, you have an unmatched } after request.execute(onSearchResponse);.. — asifrc
– asifrc, Commented Aug 7, 2013 at 15:37
the } after request.execute(onSearchResponse); close the function search() {. The console show the following error: Unable to post message to file://. Recipient has origin null — Tom
– Tom, Commented Aug 7, 2013 at 15:49

Yannick Y · Accepted Answer · 2013-08-07 15:43:54Z

2

Try this example here

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google AJAX Search API Sample</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    // How to search through a YouTube channel aka http://www.youtube.com/members

    google.load('search', '1');

    function OnLoad() {

      // create a search control
      var searchControl = new google.search.SearchControl();

      // So the results are expanded by default
      options = new google.search.SearcherOptions();
      options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);

      // Create a video searcher and add it to the control
      searchControl.addSearcher(new google.search.VideoSearch(), options);

      // Draw the control onto the page
      searchControl.draw(document.getElementById("content"));

      // Search
      searchControl.execute("U2");
    }

    google.setOnLoadCallback(OnLoad);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="content">Loading...</div>
  </body>
</html>

edited Aug 7, 2013 at 15:43

answered Aug 7, 2013 at 15:36

Yannick Y

2,8561 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tom Over a year ago

i want use the youtube javascript api

hung phan · Accepted Answer · 2016-02-24 17:15:13Z

When you use <script src="https://apis.google.com/js/client.js?onload=onClientLoad" ..></script>

you have to upload the html file somewhere online or use XAMPP on your PC

To use html for searching YT videos, using Javascript on PC, as I know, we need to use other codings:

1- Use javascript code similar to this for API version 2.0. Except only the existence of API KEY v3.

2- Use the jQuery method "$.get(..)" for the purpose.

See: http://play-videos.url.ph/v3/search-50-videos.html

For more details see (my post "JAVASCRIPT FOR SEARCHING VIDEOS"):

http://phanhung20.blogspot.com/2015_09_01_archive.html

var maxRes = 50; 
 function searchQ(){
      query = document.getElementById('queryText').value;
      email = 'https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=50'+
      '&order=viewCount&q='+ query + '&key=****YOUR API3 KEY*****'+
      '&callback=myPlan';
      var oldsearchS = document.getElementById('searchS');
      if(oldsearchS){
            oldsearchS.parentNode.removeChild(oldsearchS);
      }
      var s = document.createElement('script');
      s.setAttribute('src', email);
      s.setAttribute('id','searchS');
      s.setAttribute('type','text/javascript');
      document.getElementsByTagName('head')[0].appendChild(s);
  }
    
  function myPlan(response){
          for (var i=0; i<maxRes;i++){
          var videoID=response.items[i].id.videoId;
          if(typeof videoID != 'undefined'){    
          var title=response.items[i].snippet.title;
          var links = '<br><img src="http://img.youtube.com/vi/'+ videoID + 
                '/default.jpg" width="80" height="60">'+
                '<br>'+(i+1)+ '.&nbsp;<a href="#" onclick="playVid(\''+ videoID + 
                '\');return false;">'+ title + '</a><br>';
          document.getElementById('list1a').innerHTML += links ;
          }
      }        
 }

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  </head>
  <body>
  <input type="text"  value="abba" id="queryText" size="80">&nbsp;
  <button type="button" onclick="searchQ()">Search 50 videos</button>
  <br><br>
  <div id='list1a' style="width:750px;height:300px;overflow:auto;
  text-align:left;background-color:#eee;line-height:150%;padding:10px">
  </div>

Raghava Kotekar · Accepted Answer · 2013-10-05 04:23:10Z

0

I used the original code that Tom posted, It gave me 403 access permission error. When I went back to my api console & checked my api access time, it was expired. So I recreated the access time for the api. It regenerated new time. And the code worked fine with results.

answered Oct 5, 2013 at 4:23

Raghava Kotekar

4715 silver badges8 bronze badges

Comments

Tom · Accepted Answer · 2013-08-07 17:56:52Z

-1

Simply i must make request from a web server.

Thanks all for your reply

answered Aug 7, 2013 at 17:56

Tom

4,10725 gold badges74 silver badges107 bronze badges

Collectives™ on Stack Overflow

Simple youtube javascript api 3 request not works

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related