Right now I've got it to work where when you click on a thumbnail, the video in the main video player is replaced with the video linked to the thumbnail. What I'm having difficulty with, is getting the poster to change to the img src of the thumbnail that was clicked.
const mainVideo = document.querySelector(".main-video");
const smallThumbnail = document.querySelectorAll(".thumbnails");
smallThumbnail.addEventListener("click", changeThumbnail);
function changeThumbnail() {
let clickedThumbnail = this.src;
mainVideo.poster = clickedThumbnail;
}
<main>
<div class="video-container">
<section class="video-hero">
<video class="main-video" controls width="1000" poster="Images/Lonely Universe TN.png">
<source src="Videos/Lonely_Universe.mp4" type="video/mp4">
</video>
</section>
<section class="video-thumbnails">
<img class="thumbnails" id="lonely-universe" src="Images/Lonely Universe TN.png"
alt="Lonely Universe Thumbnail">
<img class="thumbnails" src="Images/Circles TN.png" alt="Circles Thumbnail">
<img class="thumbnails" id="adlanta" src="Images/AA TN.png" alt="Adlanta Agency Thumbnail">
<img class="thumbnails" src="Images/AVA TN.png" alt="AVA Women Thumbnail">
<img class="thumbnails" src="Images/Rapture TN.png" alt="Everybody's Gone To The Rapture Thumbnail">
<img class="thumbnails" src="Images/Carrot TN.png" alt="Carrot Fertility Thumbnail">
<img class="thumbnails" src="Images/Eternal Love TN.png" alt="Eternal Love Thumbnail">
</section>
</div>
</main>
Using querySelectorAll gives me an error of "smallThumbnail.addEventListener is not a function." Switching that to just querySelector removes that error, but console logging the clickedThumbnail will only show the src of the first video, nothing shows up when clicking any other thumbnail.