title: How can I get the video id of the top youtube query result?
body: <p>All of my coding experience is in lower level systems but I wanted to learn some html/js stuff so i'm pretty noob - you might need to spell things out for me sometimes. </p>
  
  <p>I have three files, search.js, query.js, and index.html</p>
  
  <p>search.js: a modified version of youtube data API. I really just want the video id of the top result from the search. Eventually I will use that video id to play a music video in a Spotify app. </p>
  
  <pre><code>// Called automatically when JavaScript client library is loaded.
  function onClientLoad() {
      gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
  }
  
  // Called automatically when YouTube API interface is loaded (see line 9).
  function onYouTubeApiLoad() {
      // This API key is intended for use only in this lesson.
      // See http://goo.gl/PdPA1 to get a key for your own applications.
      gapi.client.setApiKey('MY API KEY HERE');
  }
  
  // Search for a specified string.
  function search() {
    var q = document.getElementById('videoQuery');
    var request = gapi.client.youtube.search.list({
      q: q,
      part: 'snippet'
      type: 'video'
    });
  
    // run the search function and save the video id DOM
    request.execute(function(response) {
      var result_id = (response.items[0]).id;
  
      // result_id now holds the video id that we need to play. 
      document.getElementById('video_id').value = result_id;
    });
  }
  </code></pre>
  
  <p>query.js: This file i wrote from scratch so please let me know if I'm doing things wrong here. I'm constructing a search query string from information about the currently playing track. The Spotify app API is being used heavily here. </p>
  
  <pre><code>require([
      '$api/models'
  ], function(models) {
      'use strict';
  
      var youtubeQuery = function() {
          // We generate the youtube query by getting the track name and album name. 
          var videoQuery = models.player.track.name;
              videoQuery += " ";
              videoQuery += models.player.track.album.name;
  
          document.getElementById('videoQuery').value = videoQuery;
      };
  
      exports.youtubeQuery = youtubeQuery;  
  });
  </code></pre>
  
  <p>index.html: I added the html code from the youtube data API example to the spotify boilerplate html file. I don't actually want the users to see a search box since the search should be automated. So there should be a way to hide things in html pretty easily. Eventually I'll be adding a youtube player that occupies the allowed area for a spotify app.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
      &lt;title&gt;Vidify&lt;/title&gt;
      &lt;!-- Include the stylesheets you need for the Views components --&gt;
      &lt;!-- See https://developer.spotify.com/docs/apps/views/1.0/ --&gt;
      &lt;link rel="stylesheet" href="$views/css/image.css"&gt;
      &lt;link rel="stylesheet" href="$views/css/list.css"&gt;
      &lt;link rel="stylesheet" href="$views/css/buttons.css"&gt;
      &lt;!-- &lt;link rel="stylesheet" href="$views/css/throbber.css"&gt; --&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;&lt;/h1&gt;
  
      &lt;script src="scripts/main.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" src="swfobject.js"&gt;&lt;/script&gt;    
      &lt;div id="ytapiplayer"&gt;
      You need Flash player 8+ and JavaScript enabled to view this video.
      &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
      var URL = "http://www.youtube.com/v/";
          URL += document.getElementById('video_id');
          URL += "?enablejsapi=1&amp;playerapiid=ytplayer&amp;version=3"
  
      var params = { allowScriptAccess: "always" };
      var atts = { id: "myytplayer" };
      swfobject.embedSWF(URL,"ytapiplayer", "425", "356", "8", null, null, params, atts);
  
      &lt;/script&gt;
  
  
  
  
      &lt;div id="buttons"&gt;
        &lt;label&gt; &lt;input id="videoQuery" value="" type="text"/&gt;&lt;button id="search-button" disabled onclick="search()"&gt;Search&lt;/button&gt;&lt;/label&gt;
  
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="auth.js"&gt;&lt;/script&gt;
      &lt;script src="search.js"&gt;&lt;/script&gt;
      &lt;script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"&gt;&lt;/script&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>My questions:</strong> </p>
  
  <p>I'm confused how to get everything working together but it would really help to know how I could just get the video ID string of the result from the youtube search. Also, is my js and html correct for feeding the query into the search.js file? </p>
  
  <p>Relevant API links: </p>
  
  <p><a href="https://developers.google.com/youtube/js_api_reference" rel="nofollow">https://developers.google.com/youtube/js_api_reference</a>
  <a href="https://developer.spotify.com/technologies/apps/guidelines/developer/" rel="nofollow">https://developer.spotify.com/technologies/apps/guidelines/developer/</a></p>