使用youtube api时未定义GAPI？

Question

似乎有一些答案，但我找不到一个可以帮助我的答案。当我使用脚本使用API​​搜索和显示Youtube视频时出现以下错误。

Uncaught ReferenceError: gapi is not defined
at HTMLFormElement.<anonymous> (app.js:7)
at HTMLFormElement.dispatch (jquery-2.2.4.min.js:3)
at HTMLFormElement.r.handle (jquery-2.2.4.min.js:3)

这是我试图使用的脚本。

    function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++){res=res.replace(/\{\{(.*?)\}\}/g,function(e,r){return t[n][r]})}return res}

$(function() {
    $("form").on("submit", function(e) {
       e.preventDefault();
       // prepare the request
       var request = gapi.client.youtube.search.list({
            part: "snippet",
            type: "video",
            q: encodeURIComponent($("#search").val()).replace(/%20/g, "+"),
            maxResults: 3,
            order: "viewCount",
            publishedAfter: "2015-01-01T00:00:00Z"
       }); 
       // execute the request
       request.execute(function(response) {
          var results = response.result;
          $("#results").html("");
          $.each(results.items, function(index, item) {
            $.get("tpl/item.html", function(data) {
                $("#results").append(tplawesome(data, [{"title":item.snippet.title, "videoid":item.id.videoId}]));
            });
          });
          resetVideoHeight();
       });
    });

    $(window).on("resize", resetVideoHeight);
});

function resetVideoHeight() {
    $(".video").css("height", $("#results").width() * 9/16);
}

function init() {
    gapi.client.setApiKey("AIzaSyCMPEAy_lc3lg_CAJj_AfSr53e6-HxzcgI");
    gapi.client.load("youtube", "v3", function() {
        // yt api is ready
    });
}