diff --git a/includes/styles.css b/includes/styles.css index d5cb071..ac7ca5e 100644 --- a/includes/styles.css +++ b/includes/styles.css @@ -271,3 +271,14 @@ td, th { margin-top: 0.5rem; gap: 0.5rem; } + +/* Theatre mode styles */ +.video-item.theatre-mode { + flex: 1 1 100%; + max-width: 100%; +} +.video-item.theatre-mode video { + width: 100%; + height: auto; + max-height: none; +} diff --git a/includes/styles_mobile.css b/includes/styles_mobile.css index e0d22bc..da632b7 100644 --- a/includes/styles_mobile.css +++ b/includes/styles_mobile.css @@ -5,6 +5,16 @@ table { td, th { padding: 8px; } +/* Theatre mode mobile styles */ +.video-item.theatre-mode { + flex: 1 1 100%; + max-width: 100%; +} +.video-item.theatre-mode video { + width: 100%; + height: auto; + max-height: none; +} .topnav { overflow: hidden; diff --git a/videos.php b/videos.php index f995be9..1d5e1c1 100644 --- a/videos.php +++ b/videos.php @@ -42,7 +42,6 @@ usort($videoData, function($a, $b) { Your browser does not support the video tag.

-

@@ -83,23 +82,8 @@ usort($videoData, function($a, $b) { document.querySelectorAll('.theatre-btn').forEach(function(btn) { btn.addEventListener('click', function() { var videoItem = btn.closest('.video-item'); - if (!document.fullscreenElement) { - if (videoItem.requestFullscreen) { - videoItem.requestFullscreen(); - } else if (videoItem.webkitRequestFullscreen) { - videoItem.webkitRequestFullscreen(); - } else if (videoItem.msRequestFullscreen) { - videoItem.msRequestFullscreen(); - } - } else { - if (document.exitFullscreen) { - document.exitFullscreen(); - } else if (document.webkitExitFullscreen) { - document.webkitExitFullscreen(); - } else if (document.msExitFullscreen) { - document.msExitFullscreen(); - } - } + var isActive = videoItem.classList.toggle('theatre-mode'); + btn.innerText = isActive ? 'Sluit theatermodus' : 'Theatermodus'; }); }); });