Add js

index.js

@@ -0,0 +1,46 @@
+const vids = [{
+    url: "https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4",
+    thumbnail: "images/gitea.png",
+    name: "Big Buck Bunny",
+    subtitle: "Short Desc",
+}, {
+    url: "a.mp4",
+    thumbnail: "images/gitea.png",
+    name: "Video 2",
+    subtitle: "Test",
+}, {
+    url: "dog.mp4",
+    thumbnail: "images/gitea.png",
+    name: "Video 3",
+    subtitle: "Woo",
+}];
+
+const videoListContainer = document.querySelector('#videoListContainer');
+const titleText = document.querySelector('#titleText');
+const vidPlayer = document.querySelector('#vidPlayer');
+
+const createVidList = () => {
+  var vidElements = "";
+
+  vids.forEach((item, index) => {
+    vidElements += `<div class="media" onclick='changeVid(${index})'>
+      <img class="mr-3" src="${item.thumbnail}" alt="thumbnail" height="96">
+      <div class="media-body">
+        <h5 class="mt-0">${item.name}</h5>
+        ${item.subtitle}
+      </div>
+    </div>
+    `;
+  });
+
+  videoListContainer.innerHTML = vidElements;
+}
+
+const changeVid = index => {
+    console.log('VIDEO IS NOW',index)
+    vidPlayer.src = vids[index].url;
+    titleText.innerHTML = vids[index].name;
+}
+
+createVidList();
+changeVid(0);