PHP HTML JS
(a quick example)
CLOSE FULLSCREEN BUTTON <div id="close" onclick="tog(false)">X</div>
VIDEO GALLERY <div class="gal"><?php $vid = glob("gallery/*.{webm,mp4,ogg}", GLOB_BRACE); if (count($vid) > 0) { foreach ($vid as $v) { $src = rawurlencode(basename($v)); echo "<video src='gallery/$src’></video>"; }} ?></div>
3 VIDEOS PER ROW .gal { display: grid; grid-template-columns: repeat(3, 1fr); }
VIDEO THUMBNAIL .gal video { width: 100%; height: 200px; object-fit: cover; }
FULLSCREEN VIDEO .gal video.full { position: fixed; z-index: 999; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; object-fit: scale-down; }
EXIT FULLSCREEN BUTTON #close { position: fixed; top: 0; right: 0; z-index: 9999; padding: 10px 15px; font-size: 20px; font-weight: 700; display: none; color: #fff; background: #741414; } #close.show { display: block; }
CLICK TO FULLSCREEN window.onload = () => { let all = document.querySelectorAll (".gal video"); for (let v of all) { v.onclick = () => { if (!v.classList.contains("full")) { tog(v); } }; } };
TOGGLE FULLSCREEN function tog (e) { document.getElementById("close") .classList.toggle("show"); let v = e==false ?document.querySelector (".gal .full") : e ; v.classList.toggle("full"); v.controls = e==false ? false : true ; if (e===false) { v.pause(); } }