https://hegel-system.de/assets/js/components/single-video.js

1document.addEventListener('DOMContentLoaded', function() {
2  const videos = document.querySelectorAll('.single-video');
3
4  videos.forEach(video => {
5    const provider = video.dataset.provider;
6    const videoId = video.dataset.videoId;
7    const consentDiv = video.querySelector('.video-consent');
8    const embedDiv = video.querySelector('.video-embed');
9    const loadBtn = video.querySelector('[data-action="load-video"]');
10    const rememberCheckbox = video.querySelector('.remember-choice');
11
12    const consentKey = `video-consent-${provider}`;
13    const hasConsent = localStorage.getItem(consentKey) === 'true';
14
15    if (hasConsent) {
16      loadVideo();
17    }
18
19    loadBtn.addEventListener('click', function() {
20      if (rememberCheckbox.checked) {
21        localStorage.setItem(consentKey, 'true');
22      }
23      loadVideo();
24    });
25
26    function loadVideo() {
27      let embedHtml = '';
28
29      switch(provider) {
30        case 'youtube':
31          embedHtml = `<iframe
32            width="560"
33            height="315"
34            src="https://www.youtube-nocookie.com/embed/${videoId}"
35            frameborder="0"
36            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
37            allowfullscreen>
38          </iframe>`;
39          break;
40        case 'vimeo':
41          embedHtml = `<iframe
42            src="https://player.vimeo.com/video/${videoId}"
43            width="640"
44            height="360"
45            frameborder="0"
46            allow="autoplay; fullscreen; picture-in-picture"
47            allowfullscreen>
48          </iframe>`;
49          break;
50      }
51
52      embedDiv.innerHTML = embedHtml;
53      consentDiv.hidden = true;
54      embedDiv.hidden = false;
55    }
56  });
57});