webapi,jsonファイルについて少し勉強したので、YoutubeAPIを使ってみようと思い簡単なコードを書いてみました。
jqueryのgetJSONメソッドを使っています。

get.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="get.js"></script>
  </head>
  <body>
<div id="player"></div>
    <div class="">
      <input id="inputText" type="text" name="" value="">
      //各種ボタンの設置
      <button id="searchButton" type="button" name="button">検索</button>
      <button id="nextButton" type="button" name="button">次へ</button>
      <button id="prevButton" type="button" name="button">戻る</button>
      <ul>

      </ul>
</div>

  </body>
</html>

get.js

$(function(){
  //ページトークンの初期化
  var pageToken = "";
  var nextPageToken = "";
  var prevPageToken = "";
  //Youtube data api をjsonファイルで取得
  function getJsonFile(){
  $.getJSON(
    'https://www.googleapis.com/youtube/v3/search?key={API Key}&part=id,snippet',
    {q:$('#inputText').val(),
     type:'video',
     maxResults:50,
     pageToken:pageToken
  },
    function(data){
    $.each(data['items'],function(i,item){
      $('ul').append('<li>' + item.snippet.title);

    });
    nextPageToken = data.nextPageToken;
    prevPageToken = data.prevPageToken;
  });
  }
  $('#searchButton').on('click',function(){
    $('li').remove();
    pageToken = "";
    getJsonFile();
  })
  $('#nextButton').on('click',function(){
    $('li').remove();
    pageToken = nextPageToken;
    getJsonFile();
  })
  $('#prevButton').on('click',function(){
    $('li').remove();
    pageToken = prevPageToken;
    getJsonFile();
  })
});