Code: Select all
<!DOCTYPE html>
<html>
<head>
<link href="/modern.css" rel="stylesheet" type="text/css" media="all">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link href="../assets/styles.min.css" rel="stylesheet">
<title>YouTube: Retrieve Title, Description and Thumbnail</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
#search-bar { margin: 1em 0; overflow: hidden; }
#search-txt { float: left; width: 60%; border-radius: 10px;}
#search-btn { margin-left: 5px; border-radius: 10px; position: relative; left: -30px;}
#video-data-1 span { width: min-content; text-align: center; display: inline-block; margin-right: 10px;}
#video-data-2 p { white-space: pre-line; }
#search-btn, #video-data-1 {font-family: 'Material Symbols Outlined';}
</style>
</head>
<body>
<p>Enter YouTube Video ID or URL in the text box below</p>
<div id="search-bar">
<input id="search-txt" type="text" value="https://www.youtube.com/watch?v=[videoid]" maxlength="100">
<input id="search-btn" type="button" value="chevron_right">
</div>
<div id="video-data-1"></div>
<ul id="video-data-2"></ul>
<script>
/*
* YouTube: Retrieve Title, Description and Thumbnail
* https://salman-w.blogspot.com/2010/01/retrieve-youtube-video-title.html
*/
$(function() {
$("#search-txt").on("keypress", function(e) {
if (e.which === 13) {
e.preventDefault();
$("#search-btn").trigger("click");
}
});
$("#search-btn").on("click", function() {
$("#video-data-1, #video-data-2").empty();
var videoid = $("#search-txt").val();
var matches = videoid.match(/^https?:\/\/www\.youtube\.com\/.*[?&]v=([^&]+)/i) || videoid.match(/^https?:\/\/youtu\.be\/([^?]+)/i);
if (matches) {
videoid = matches[1];
}
if (videoid.match(/^[a-z0-9_-]{11}$/i) === null) {
$("<p style='color: #F00;'>Unable to parse Video ID/URL.</p>").appendTo("#video-data-1");
return;
}
$.getJSON("https://www.googleapis.com/youtube/v3/videos", {
key: "AIzaSyDHkRx-wZb5_Pm7B37H7s1quu21kGKSfxg",
part: "snippet, statistics",
id: videoid
}, function(data) {
if (data.items.length === 0) {
$("<p style='color: #F00;'>Video not found.</p>").appendTo("#video-data-1");
return;
} $("<video>", {
src: "https://yewtu.be/latest_version?itag=22&id=" + videoid,
poster:
"https://yewtu.be/vi/" + videoid + "/maxres.jpg",
controls: 1,
style: "border-radius: 10px;"
}).appendTo("#video-data-1");
$("<br>").appendTo("#video-data-1");
$("<h1></h1>").text(data.items[0].snippet.title).appendTo("#video-data-2");
$("<span></span>").text("Publish " + data.items[0].snippet.publishedAt).appendTo("#video-data-1");
$("<span></span>").text("Visibility " + data.items[0].statistics.viewCount).appendTo("#video-data-1");
$("<span></span>").text("thumb_up " + data.items[0].statistics.likeCount).appendTo("#video-data-1");
$("<span></span>").text("Dislike count: " + data.items[0].statistics.dislikeCount).appendTo("#video-data-1");
$("<p></p>").text(data.items[0].snippet.description).appendTo("#video-data-2");
}).fail(function(jqXHR, textStatus, errorThrown) {
$("<p style='color: #F00;'></p>").text(jqXHR.responseText || errorThrown).appendTo("#video-data-1");
});
});
});
window.onload=function(){
function querySt(ji) {
hu = window.location.search.substring(1);
gy = hu.split("&");
for (i=0;i<gy.length;i++) {
ft = gy[i].split("=");
if (ft[0] == ji) {
return ft[1];
}
}
}
var q = querySt("q");
if( q==null){
}else{
document.getElementById('search-txt').value = q;
}
}
</script>
</body>
</html>