I'm testing the Youtube Data API V3 to get a list videos by a query term and subsequently play them in an iframe.
I'm getting this error:
www-embed-player.js:306 GET net::ERR_BLOCKED_BY_CLIENT
After some debugging and googling, I discovered that this error is often caused by adblockers. I've then disabled mine on Chrome and then retested the api call.
I no longer see the original error :ERR_BLOCKED_BY_CLIENT but my videos retrieved do not play. Player message: An error occurred, please try again later.
Below is the code. The JS is in the HTML file itself for simplicity.
Any help appreciated!
<!doctype html>
<html lang="en">
<head>
<title>Youtube API Test </title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=".0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
</head>
<style>
body {
background-color: #0F0F0F;
}
button.btn.btn-primary {
background-color: #E12523;
border-color: #E12523;
}
div.jumbotron {
background-color: #292929;
color: #B3B3B3;
}
hr.my-2 {
border: 1px solid #B3B3B3;
}
</style>
<body>
<div class="wrapper container">
<div class="jumbotron">
<h1 class="display-3">Youtube Api</h1>
<p class="lead">Let's use the Yotube Api to get videos</p>
<hr class="my-2">
<form>
<div class="form-group">
<label for="user-query"></label>
<input type="text" class="form-control" id="user-query" aria-describedby="emailHelp" placeholder="Search Youtube">
</div>
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</form>
</div>
</div>
<div class="container" id="results"></div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src=".3.1/jquery.min.js"></script>
<script src=".js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<script src=".0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
<script type="text/javascript">
//Get Videos
$("#submit").on("click", function (event) {
event.preventDefault();
var queryTerm = $("#user-query").val().trim();
$.ajax({
url: ";q=" + queryTerm + "&type=video&key=[MY API KEY]",
method: "GET"
}).then(function (data) {
console.log(data);
$.each(data.items, (i, item) => {
console.log(data.item);
const videoId = item.id.videoId;
let $iFrameContainer = $(`<iframe width="420" height="345" src="/"' ${videoId} '> <\/iframe >`);
$("#results").append($iFrameContainer);
})
});
})
</script>
</body>
</html>