yt.html

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://apis.google.com/js/api.js"></script>
<div id="channel-data" class="col s6"></div>
<p id="next" style="display:none;">Next</p>
<p id="prev" style="display:none;">Prev</p>
<script>
  /**
   * Sample JavaScript code for youtube.search.list
   * See instructions for running APIs Explorer code samples locally:
   * https://developers.google.com/explorer-help/guides/code_samples#javascript
   */

  function authenticate() {
    return gapi.auth2.getAuthInstance()
        .signIn({scope: "https://www.googleapis.com/auth/youtube.force-ssl"})
        .then(function() { console.log("Sign-in successful"); },
              function(err) { console.error("Error signing in", err); });
  }
  function loadClient() {
    gapi.client.setApiKey("AIzaSyCyh9YF35iT6A9UgV4zyC-bP_ch_DcfTpE");
    return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
        .then(function() { console.log("GAPI client loaded for API"); },
              function(err) { console.error("Error loading GAPI client for API", err); });
  }
  // Make sure the client is loaded and sign-in is complete before calling this method.
  function execute() {
    return gapi.client.youtube.search.list({
      "part": [
        "snippet"
      ],
      "maxResults": 25,
      "q": "surfing"
    })
        .then(function(response) {
        
                // Handle the results here (response.result has the parsed body).
                console.log("Response", response);
        
                const video = response.result.items[1];
                 const output =`<ul class="collection">
<li class="collection-item">Title:${video.id.kind}</li>
<li class="collection-item">ID:${video.id.videoID}</li>
    </ul>
<hr>
`;
        function show(output){
            const channeldata= document.getElementById('channel-data');
            channeldata.innerHTML=output;
        }
              },
              function(err) { console.error("Execute error", err); });
  }
  
</script>
<button onclick="authenticate().then(loadClient)">authorize and load</button>
<button onclick="execute()">execute</button>