Play video based on id from link [js]

Question

I have a page with 3 videos. When you click a video, it opens in a Modal, and clicking away closes the video. Cool.

There is CSS to position the video and draw where you have to close it. Then there is the Javascript file, which reads all the class names and creates the clicking for opening and closing the video. Currently, I need a chunk of classes named 001, 002, 003... linking to an equal number of JavaScript files, which have also been edited with these new names and the video links. Because the class IDs will all have to be different with in the same HTML file, I will also need additional code in the style sheet despite it all being identical except for the names.

This page is going to have 30 or more videos..

I know that stack Overflow is for tweaking each other's code, but if you could at least point me in the right direction that would be very helpful indeed.

I am looking for a way to make a list of YouTube videos, and attach them to links so that only one CSS script is needed to style all of them at the same time, and only one Javascript file is needed to play all of them the same way.

What I need (I think), is the method in JavaScript for grabbing a string that was clicked on, and putting that into a chunk of code, then displaying the associated video.

So if I click on video #12, the JS would display a Modal containing youtube*com/embed/(video#12)/.

Another example is a guy in the projection room of a theater plays 8 different videos, vs 8 guys that each show 1.

Answer 1

You could attach an attribute with the video link into each video element. Then you could give all the elements the same class and even target them by that class. When you click them, your JS code should retrieve the video link from the attached attribute, and display it in the model.

So it would be something like:

<ul class="video-list">
    <li class="video-link" data-link="https://youtube.com/embed/[video#1]/.">The link title</li>
    <li class="video-link" data-link="https://youtube.com/embed/[video#2]/.">The link title</li>
    ...
</ul>

Then add a event listener on each element:

var videoLink = document.querySelector(".video-link");

videoLink.addEventListener('click', function() {
    var link = this.getAttribute("data-link");

    openModal(link); // A method that opens the modal.
});

With this, you can add styling to the video-link class as you please, to target all the video links without them having different id's or classes. It won't limit the amount on videos either since they all have their own link attached directly to the element.

Maybe this would lead you in the right direction?

Answer 2

Solved! Please see Link or button sets a variable, then calls the script for the results and me gushing over how awesome everyone's been with helping :)