PHP HTML JS

VERY SIMPLE PHP VIDEO GALLERY

(a quick example)

CLOSE FULLSCREEN BUTTON <div id="close" onclick="tog(false)">X</div>

GALLERY HTML PAGE

01

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); }

GALLERY CSS STYLES

02

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; }

GALLERY CSS STYLES

02

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); }   }; } };

VIDEO GALLERY JAVASCRIPT

03

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(); }  }

VIDEO GALLERY JAVASCRIPT

03