how to make the id work without

Talk about your website ideas, web design, coding, software and hardware.
Post Reply
Floris Rietman
Posts: 5
Joined: Sat Feb 04, 2023 2:11 pm
Pronouns: he/him

how to make the id work without

Post by Floris Rietman »

So i made this site that has a input that uses this format[videoid] but i want to also make it work with only [videoid] does anyone know how? (btw if your wondering its a youtube client) the code:

Code: Select all

<!DOCTYPE html>
<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=",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="//"></script>
		#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';}
	<p>Enter YouTube Video ID or URL in the text box below</p>
	<div id="search-bar">
		<input id="search-txt" type="text" value="[videoid]" maxlength="100">
		<input id="search-btn" type="button" value="chevron_right">
	<div id="video-data-1"></div>
	<ul id="video-data-2"></ul>
		 * YouTube: Retrieve Title, Description and Thumbnail
		$(function() {
			$("#search-txt").on("keypress", function(e) {
				if (e.which === 13) {
			$("#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");
				$.getJSON("", {
					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");
					} $("<video>", {
						src: "" + videoid,
 "" + videoid + "/maxres.jpg",
 controls: 1,
 style: "border-radius: 10px;"
					$("<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");
				}).fail(function(jqXHR, textStatus, errorThrown) {
					$("<p style='color: #F00;'></p>").text(jqXHR.responseText || errorThrown).appendTo("#video-data-1");

function querySt(ji) {

hu =; 
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){ 
document.getElementById('search-txt').value = q; 
Posts: 31
Joined: Fri Jan 27, 2023 4:56 pm

Re: how to make the id work without

Post by glacial_pace »

im confused it seems to work with just inputting the ID now yeah?
Post Reply