<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>My Shows</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>My Shows</h1>

<div id="video-container"></div>

<script>

// Manually list the videos

const videos = [

"Shows/TLS1E01.mp4",

"Shows/TLS1E02.mp4",

"Shows/TLS1E03.mp4"

];

const container = document.getElementById("video-container");

videos.forEach(videoSrc => {

const wrapper = document.createElement("div");

wrapper.className = "video-block";

const video = document.createElement("video");

video.src = videoSrc;

video.controls = true;

video.width = 480;

const label = document.createElement("p");

label.textContent = videoSrc.split('/').pop();

wrapper.appendChild(video);

wrapper.appendChild(label);

container.appendChild(wrapper);

});

</script>

</body>

</html>