https://www.vlieland-info.eu/js/video.js

1document.addEventListener("DOMContentLoaded", function () {
2  const modal = document.getElementById("youtubeModal");
3  const modalTitle = document.getElementById("youtubeModalTitle");
4  const playerContainer = document.getElementById("youtubeModalPlayerContainer");
5  const closeBtn = document.querySelector(".youtube-modal-close");
6
7  document.querySelectorAll(".youtube-modal-trigger").forEach(el => {
8    el.addEventListener("click", () => {
9      const videoId = el.getAttribute("data-video-id");
10      const videoTitle = el.getAttribute("data-video-title");
11
12      const iframeWrapper = document.createElement("div");
13      iframeWrapper.className = "ratio ratio-16x9";
14
15      const iframe = document.createElement("iframe");
16      iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
17      iframe.title = videoTitle;
18      iframe.setAttribute("allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share");
19      iframe.setAttribute("referrerpolicy", "strict-origin-when-cross-origin");
20      iframe.setAttribute("loading", "lazy");
21      iframe.setAttribute("allowfullscreen", "true");
22      iframe.style.width = "100%";
23      iframe.style.height = "100%";
24      iframe.style.border = "0";
25
26      iframeWrapper.appendChild(iframe);
27      modalTitle.textContent = videoTitle;
28      playerContainer.innerHTML = "";
29      playerContainer.appendChild(iframeWrapper);
30      modal.style.display = "block";
31    });
32  });
33
34  closeBtn.addEventListener("click", () => {
35    modal.style.display = "none";
36    playerContainer.innerHTML = "";
37  });
38
39  window.addEventListener("click", e => {
40    if (e.target === modal) {
41      modal.style.display = "none";
42      playerContainer.innerHTML = "";
43    }
44  });
45});