http://fusch.at/system/statV.1789655742/Javascript/video_overlay.js

1const dataURL = '/system/web/getjsontext.ashx?group=pt_DSGVO_video'; // Texthandler
2var dataTextJSON; // Globale TextDaten Variable
3
4function initLazyVideo() {
5
6	getJSONData(dataURL, function (data) {
7
8		const videoContainers = document.querySelectorAll(".lazyVideo[data-video-id]");
9		const lsLazyVideo = localStorage.getItem("risLazyVideo") || "";
10		let overlayTitle = dataTextJSON["T-304115793"];
11
12		videoContainers.forEach((videoContainer) => {
13			const videoPlatform = videoContainer.getAttribute("data-video-platform");
14
15			if (lsLazyVideo.includes(videoPlatform)) {
16				initLazyVideoDetail(videoContainer);
17			}
18			else {
19				let overlayGDPRRiskWarningText;
20				let overlayGDPRNotice_CBLabel;
21				let overlayGDPRNotice_Button;
22				let overlayGDPRNotice_Provider;
23				let overlayGDPRNotice_ProviderState;
24				let overlayGDPRNotice_Privacy;
25
26				switch (videoPlatform) {
27					case "yt":
28					case "youtube":
29						overlayGDPRRiskWarningText = dataTextJSON["T-304115798"];
30						overlayGDPRNotice_CBLabel = dataTextJSON["T-304115794"];
31						overlayGDPRNotice_Button = dataTextJSON["T-304115796"];
32						overlayGDPRNotice_Provider = "Google LLC";
33						overlayGDPRNotice_ProviderState = dataTextJSON["T-304115869"];
34						overlayGDPRNotice_Privacy = dataTextJSON["T-304116503"];
35						break;
36					case "vimeo":
37						overlayGDPRRiskWarningText = dataTextJSON["T-304115798"];
38						overlayGDPRNotice_CBLabel = dataTextJSON["T-304115794"];
39						overlayGDPRNotice_Button = dataTextJSON["T-304115796"];
40						overlayGDPRNotice_Provider = "Vimeo.com";
41						overlayGDPRNotice_ProviderState = dataTextJSON["T-304115869"];
42						overlayGDPRNotice_Privacy = dataTextJSON["T-304116503"];
43						break;
44					default:
45						overlayGDPRRiskWarningText = dataTextJSON["T-304115798"];
46						overlayGDPRNotice_CBLabel = dataTextJSON["T-304115794"];
47						overlayGDPRNotice_Button = dataTextJSON["T-304115796"];
48						overlayGDPRNotice_Provider = "Videoanbieter";
49						overlayGDPRNotice_ProviderState = dataTextJSON["T-304115869"];
50						overlayGDPRNotice_Privacy = dataTextJSON["T-304116503"];
51						break;
52				}
53
54				overlayGDPRRiskWarningText = overlayGDPRRiskWarningText.replaceAll("[Empfänger]", overlayGDPRNotice_Provider);
55				overlayGDPRRiskWarningText = overlayGDPRRiskWarningText.replaceAll("[Drittland]", overlayGDPRNotice_ProviderState);
56
57				const overlayEl = document.createElement("div");
58				overlayEl.classList.add("lazyVideo__OverlayGDPR");
59
60				const overlayElContentWrapper = document.createElement("div");
61				overlayElContentWrapper.classList.add("lazyVideo__OverlayGDPRContentWrapper");
62
63				const overlayNoticeElTitle = document.createElement("span");
64				overlayNoticeElTitle.classList.add("lazyVideo__OverlayGDPRRiskWarningTitle");
65				overlayNoticeElTitle.innerText = overlayTitle;
66
67				const overlayNoticeEl = document.createElement("span");
68				overlayNoticeEl.classList.add("lazyVideo__OverlayGDPRRiskWarningText");
69				overlayNoticeEl.innerText = overlayGDPRRiskWarningText;
70
71				const overlayNoticeAllowForAllCheckbox = document.createElement("input");
72				overlayNoticeAllowForAllCheckbox.classList.add("lazyVideo__OverlayGDPRCheckbox");
73				overlayNoticeAllowForAllCheckbox.type = "checkbox";
74
75				const overlayNoticeAllowForAllLabel = document.createElement("label");
76				overlayNoticeAllowForAllLabel.classList.add("lazyVideo__OverlayGDPRLabel");
77				overlayNoticeAllowForAllLabel.innerText = overlayGDPRNotice_CBLabel;
78				overlayNoticeAllowForAllLabel.prepend(overlayNoticeAllowForAllCheckbox);
79
80				const overlayNoticeAcceptButton = document.createElement("button");
81				overlayNoticeAcceptButton.classList.add("lazyVideo__OverlayGDPRButton");
82				overlayNoticeAcceptButton.type = "button";
83				overlayNoticeAcceptButton.innerText = overlayGDPRNotice_Button;
84
85				const overlayNoticePrivacyWrapper = document.createElement("span");
86				overlayNoticePrivacyWrapper.classList.add("lazyVideo__OverlayGDPRPrivacyWrapper");
87
88				const overlayNoticePrivacyLink = document.createElement("a");
89				overlayNoticePrivacyLink.classList.add("lazyVideo__OverlayGDPRPrivacy");
90				overlayNoticePrivacyLink.href = "/system/web/datenschutz.aspx";
91				overlayNoticePrivacyLink.title = "zur " + overlayGDPRNotice_Privacy;
92				overlayNoticePrivacyLink.innerText = overlayGDPRNotice_Privacy;
93
94				
95
96				overlayNoticeAcceptButton.addEventListener("click", function () {
97					if (overlayNoticeAllowForAllCheckbox.checked) {
98						localStorage.setItem("risLazyVideo", lsLazyVideo + videoPlatform + ";");
99						location.reload();
100					}
101					else {
102						initLazyVideoDetail(videoContainer);
103					}
104				});
105
106
107				overlayElContentWrapper.append(overlayNoticeElTitle, overlayNoticeEl, overlayNoticeAllowForAllLabel, overlayNoticePrivacyWrapper, overlayNoticeAcceptButton);
108				overlayNoticePrivacyWrapper.append(overlayNoticePrivacyLink)
109				overlayEl.append(overlayElContentWrapper);
110				videoContainer.append(overlayEl);
111
112
113			}
114		});
115	});
116}
117
118function initLazyVideoDetail(videoContainer) {
119
120	getJSONData(dataURL, function (data) {
121
122		const videoPlatform = videoContainer.getAttribute("data-video-platform");
123		const thumbnailSrc = videoContainer.getAttribute("data-video-thumbnail");
124		const videoId = videoContainer.getAttribute("data-video-id");
125
126		if (["yt", "youtube", "vimeo"].includes(videoPlatform)) {
127			let thumbnailSrc = "";
128			if (!thumbnailSrc) {
129				if (videoPlatform === "vimeo") {
130					thumbnailSrc = "https://vumbnail.com/" + videoId + ".jpg";
131				}
132				else {
133					thumbnailSrc = "https://img.youtube.com/vi/" + videoId + "/hqdefault.jpg";
134				}
135			}
136
137			const thumbnailEl = document.createElement("img");

138			thumbnailEl.classList.add("lazyVideo__Thumbnail");
139			thumbnailEl.src = thumbnailSrc;
140
141			const overlayEl = document.createElement("div");
142			overlayEl.classList.add("lazyVideo__Overlay");
143			overlayEl.setAttribute("tabindex", "0");
144
145			let overlayGDPRNotice;
146			switch (videoPlatform) {
147				case "yt":
148				case "youtube":
149					overlayGDPRNotice = dataURL["T-304115794"];
150					break;
151				case "vimeo":
152					overlayGDPRNotice = dataURL["T-304115795"];
153					break;
154				default:
155					overlayGDPRNotice = "Bei Start des Videos werden Daten mit dem Inhaltsanbieter ausgetauscht.";
156					break;
157			}
158
159			const overlayColoredBg = document.createElement("div");
160			overlayColoredBg.classList.add("lazyVideo__OverlayColoredBg");
161
162			overlayEl.append(overlayColoredBg);
163			videoContainer.append(overlayEl, thumbnailEl);
164
165			videoContainer.addEventListener("click", initVideoPlatform.bind(null, videoContainer, videoPlatform));
166			videoContainer.addEventListener("keydown", function (event) {
167				if (event.keyCode === 13 || event.keyCode === 32) {
168					initVideoPlatform(videoContainer, videoPlatform);
169				}
170			});
171		}
172	});
173}
174
175function initVideoPlatform(videoContainer, videoPlatform) {
176	const videoId = videoContainer.getAttribute("data-video-id");
177
178	switch (videoPlatform) {
179		case "yt":
180		case "youtube":
181			videoContainer.innerHTML = '<iframe src="https://www.youtube.com/embed/' + videoId + '?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>';
182			break;
183		case "vimeo":
184			videoContainer.innerHTML = '<iframe src="https://player.vimeo.com/video/' + videoId + '?autoplay=1" frameborder="0" allowfullscreen></iframe>';
185			break;
186	}
187}
188
189function getJSONData(dataURL, callback) {
190	fetch(dataURL)
191		.then(response => response.json())
192		.then(data => {
193			dataTextJSON = data;
194			callback(data);
195		})
196		.catch(error => console.error('Error fetching JSON data:', error));
197}
198
199document.addEventListener("DOMContentLoaded", initLazyVideo);