<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<h5>Youtube id (11 characters):</h5>
<input type="text" id="youtubeId">
<div id="info"></div>
<iframe id="myIframe" width="426" height="240"></iframe>
<script src="script.js"></script>
</body>
</html>
var delay = (function() {
var timer = 0;
return function(callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
$('#youtubeId').keyup(function() {
delay(function() {
var videoID = $('#youtubeId').val();
var videos = "https://www.googleapis.com/youtube/v3/videos";
var apiKey = "AIzaSyAzYHm1iwMocB9pW2uZrz_6Sqte5t_bXGo"; // Insert here your api key
var fieldsTitle = "fields=items(snippet(title))";
var fieldsEmpty = "";
var part = "part=snippet";
function getUrl(fields) {
var url = videos + "?" + "key=" + apiKey + "&" + "id=" + videoID + "&" + fields + "&" + part;
return url;
}
$.get(getUrl(fieldsEmpty), function(response) {
var status = response.pageInfo.totalResults;
var title;
if (status) {
$.get(getUrl(fieldsTitle), function(response) {
title = response.items[0].snippet.title;
$('#info').text(title);
var url = "https://www.youtube.com/embed/" + videoID;
$('#myIframe').attr('src', url)
})
} else {
title = "Video doesn't exist";
$('#info').text(title);
$('#myIframe').attr('src', "");
}
});
}, 1000);
});
#youtubeId {
display: block;
width: 426px;
}
#info {
width: 426px;
font-weight: bold;
padding: 20px 0;
}