[Malleys]

В идеале вставляю в инпут поле ссылку на YouTube ролик и на аяксе получаю в другом инпуте длительность этого ролика.

Давайте сначала очистим ваш запрос от вещей, которые не имеют никакого смысла и только запутывают вас!

на аяксе

Я всё больше удивляюсь попыткам программировать на несуществующих вещах... В JavaScript нет такого! Я спрашивал у других программистов(C#, Java), поверьте, они они более чем уверены, что такое не нужно для того, чтобы сделать запрос к серверу! Кому вы хотите запудрить мозги своим «на аяксе»? Так и говорите, что вы хотите получить данные с сервера, а не «на аяксе»! Вы не можете послать AJAX-запрос. Но вы можете послать асинхронный HTTP-запрос, если вы хотите.

получаю в другом инпуте

Это так не работает... Интерфейс Fetch API никак не связан с интерфейсом Element, но если вы хотите вы можете написать код, который запишет результат запроса в какой-нибудь элемент! <input> в первую очередь предназначен для ввода данных от пользователя...

Я думаю, что вы хотели узнать это...

В идеале вставляю в инпут поле ссылку на YouTube ролик и... получаю ... длительность этого ролика.

<form onsubmit="getData(this); return false;" oninput="getData(this);">
	<input name="url" pattern=".*(?:youtube(?:-nocookie)?\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)?([a-zA-Z0-9_-]{11}).*" required spellcheck="false" placeholder="Введите адрес или идентификатор видео с YouTube, чтобы узнать его продолжительность">
	<output><span></span></output>
</form>

<script>
async function getData(form) {
	const key = "AIzaSyDYwPzLevXauI-kTSVXTLroLyHEONuF9Rw";
	const input = form.querySelector("[name=url]");
	const output = form.querySelector("output");
	
	try {
		if(!input.checkValidity()) throw new Error("Введите ссылку на видео в YouTube");
		const id = new RegExp(input.pattern).exec(input.value)[1];
		const response = await fetch(`https://www.googleapis.com/youtube/v3/videos?id=${id}&key=${key}&part=snippet,contentDetails`);
		const { items } = await response.json();
		
		if("0" in items === false) throw new Error("Видео не найдено");
		
		output.style.backgroundImage = `url(${items[0].snippet.thumbnails.default.url})`;
		output.innerHTML = `<span>${parseTime(items[0].contentDetails.duration)}</span>`;
		output.className = "ok";

		function parseTime(time) {
			const match = time.match(/^PT(?:(\d+)H)?(?:(\d{1,2})M)?(\d{1,2})S$/).slice(1).map(v => v || 0).map(Number);
			return `${60 * match[0] + match[1]}:${String(match[2]).padStart(2, "0")}`;
		}
	} catch(error) {
		output.className = "";
		output.style.backgroundImage = "";
		output.textContent = error.message;
	}
	
}
</script>
<style>

output.ok {
	width: 120px;
	height: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 1em;
	border-radius: 0.3em;
}

output.ok > span {
	color: white;
	background: rgba(0, 0, 0, 0.5);
	font: bold 1.5em system-ui;
	margin: 0.2em;
	padding: 0.1em 0.3em;
	border-radius: 0.2em;
	text-shadow: 0 2px black;
}

form {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

[name="url"] {
	all: unset;
	border-radius: 5px;
	padding: 0.5em;
	font: 1em system-ui;
	background: var(--bg-color, white);
	box-shadow: inset 0 0 0 2em var(--bg-color, white);
	color: var(--fg-color, black);
	-webkit-text-fill-color: var(--fg-color, black);
	border: 1px solid var(--fg-color, black);
	width: 90%;
	text-align: center;
}

[name="url"]:valid {
	--fg-color: #33691E;
	--bg-color: #F1F8E9;
}

[name="url"]:invalid:not(:placeholder-shown) {
	--fg-color: red;
	--bg-color: #ffeeee;
}

</style>