I have 3 files: - index.html - style.css - app.js
When I run the html it does not return the Youtube API connection, it already indicates the KEY API and so on.
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("AIzaSyC0Tf6tHJAHAXAyIvA2rGOJc-_Xo0Dln-0");
gapi.client.load("youtube", "v3", function() {
// yt api is ready
});
}body { background: #f5c9c5; }
header { margin-top: 30px; }
header a { color: black; text-decoration: none; }
header a:hover { text-decoration: none; }
form { margin-top: 20px; }
form, #results { padding: 0 20px; }
.item { margin-bottom: 25px; }
.w100 { width: 100%; }
.btn-primary { background: #952b2b; border-color: #957575; }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background: #782b2b; border-color: #952b2b; }<!DOCTYPE html>
<html lang="en">
<head>
<title>Your awesome Youtube search engine</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Awesome videos!" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1 class="w100 text-center"><a href="index.html">YouTube Viral Search</a></h1>
</header>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<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>
</div>
<!-- scripts -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/app.js"></script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>
</body>
</html>I get the following error:
cb = gapi.loaded_0: 119 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file: //') does not match the recipient's origin window ('null').
and in the line of code: var request = gapi.client.youtube.search.list ({
I would appreciate your support.
Greetings Luis Sánchez