0

I am creating a webworks application, so my code is not being placed on a server. The youtube data api does not work when accessing from your local file system, but that it how my application works. I need a work around, or a way to make a local private web server with pure js, no command line tools. 

                               html

<!DOCTYPE HTML>
<html>

  <head>
    <title>add song</title>
    <link type="text/css" href="../css/AS_Style.css" rel="stylesheet">
  </head>

  <body> 

    <div id="main">
      <p id="response">a</p>

      <form action="#">
        <p><input type="text" id="search" placeholder="Type something..." autocomplete="off" class="form-control" /></p>
        <p><input type="submit" value="Search" class="form-control btn btn-primary w100"></p>
      </form>

      <div id="results"></div>
    </div>



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="../js/AS.js"></script>  
    <script src="https://apis.google.com/js/api.js"></script>
    <script>
      function init() {
        gapi.client.init({
           'apiKey':'key here',
        });
        search();
        }
      gapi.load('client',init);
    </script>  

  </body>

</html>






                                JavaScript 

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 search() {
    $("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",
       }); 
       // execute the request
       request.execute(function(response) {
          var results = response.result;
          $("#results").html("");
          $.each(results.items, function(index, item) {
            $.get("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);
}
SoLow Productions
  • 79
  • 1
  • 3

2 Answers2

0

Can you show the code you're using to call Youtube's API? You can get the API data with pure javascript:

var xhr = new XMLHttpRequest(); xhr.open("GET", "https://www.googleapis.com/youtube/v3/channels?part=contentDetails&id=CHANNEL_ID&maxResults=1&fields=items&order=date&key=API_KEY", false); xhr.send(); document.write(xhr.responseText);

Did you try triggering a shell script via javascript, and making the shell script run the API code?

Apparently this worked: https://stackoverflow.com/a/21484756/7922428

Bman70
  • 743
  • 5
  • 11
0

Youtube API doesnt work without connection to the internet, which when your locally testing, is done through local servers.

Here are my suggestions:

ReyAnthonyRenacia
  • 17,219
  • 5
  • 37
  • 56