youtube_cuts.js

document.body.innerHTML = `
<div id="videoContainer"></div>

<div id="textEntryContainer">
	<textarea id="urlInput" name="w3review" rows="4" cols="50">
		paste from the google sheet here
	</textarea>
	<button id="playlistButton">click here to make playlist</button>
</div>

<div id="tableContainer">
	<table>
	</table>
</div>
`;

const videoContainer = document.getElementById('videoContainer');
const textEntryContainer = document.getElementById('textEntryContainer');
const tableContainer = document.getElementById('tableContainer');
const timestampTable = tableContainer.querySelector('table');
const urlInput = document.getElementById('urlInput');
const playlistButton = document.getElementById('playlistButton');

let lastClickedUrl;

function htmlToElement(html) {
    var template = document.createElement('template');
    html = html.trim(); // Never return a text node of whitespace as the result
    template.innerHTML = html;
    return template.content.firstChild;
}


function urlToIframeString(url) {
	const videoID = url.split("=")[1]
	return `<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoID}?autoplay=0" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
}

const elementsByUrl = {};

function addVideo(url, timeString) {
	const iframe = htmlToElement(urlToIframeString(url));
	iframe.style.display = 'none';
	const timeComponents = timeString.split(':');
	let numSec = 0;
	if(timeComponents.length === 2) {
		numSec = parseInt(timeComponents[0]) * 60 + parseInt(timeComponents[1]);
	} else if(timeComponents.length === 3) {
		numSec = parseInt(timeComponents[0]) * 60 + parseInt(timeComponents[1]) * 60 + parseInt(timeComponents[2]);
	} else {
		alert(`the timestamp ${timeString} for url ${url} is in the wrong format`);
	}

	let tableRow = addTableRow(url, iframe, numSec, timeString);

	elementsByUrl[url] = {iframe, numSec, tableRow};

	videoContainer.append(iframe);
}

function addTableRow(url, iframe, numSec, timeString) {
	let rowHtml = `<tr><td>${url}</td><td>${timeString}</td></tr>`;
	let rowElement = htmlToElement(rowHtml);
	timestampTable.append(rowElement);

	rowElement.onclick = () => {
		if(lastClickedUrl) {
			elementsByUrl[lastClickedUrl].iframe.querySelector('video').stop();
			elementsByUrl[lastClickedUrl].iframe.style.display = 'none';
			elementsByUrl[lastClickedUrl].tableRow.style.backgroundColor = 'white';
		}

		playingVideo = iframe.contentDocument.body.querySelector('video');
		playingVideo.currentTime = numSec;
		iframe.style.display = 'block';
		playingVideo.play();
		rowElement.style.backgroubdColor = 'yellow';
	}

	return rowElement;
}

playlistButton.onclick = () => {
	let inputRows = urlInput.value.split("\n");
	inputRows.forEach(rowString => {
		let [url, timeString] = rowString.split(/\s+/);
		addVideo(url, timeString);
	})
}

https://developers.google.com/youtube/player_parameters#rel
https://developers.google.com/youtube/iframe_api_reference