PHP HTML JS
VERY SIMPLE PHP VIDEO GALLERY
<div id="vid-gallery"><?php GET LIST OF VIDEOS $all = glob("GALLERY/*.{webm,mp4,ogg}", GLOB_BRACE);
GALLERY HTML PAGE
01
OUTPUT HTML <VIDEO> foreach ($all as $v) { printf("<video src='gallery/%s'></video>", rawurlencode(basename($v))); } ?></div>
GRID CONTAINER #vid-gallery { display: grid; grid-gap: 10px; grid-template-columns: auto auto; } FIT VIDEO INTO GRID #vid-gallery video { width: 100%; cursor: pointer; }
SOME CSS STYLES
02
GET ALL VIDEO TAGS var all = document.querySelectorAll ("#vid-gallery video");
VIDEO GALLERY JAVASCRIPT
03
for (let v of all) { CLICK TO GO FULLSCREEN v.onclick = () => { if (!v.fullscreenElement) { v.controls = true; v.requestFullscreen(); }};
ON EXIT FULLSCREEN v.onfullscreenchange = () => { if (document.fullscreenElement==null) { v.controls = false; v.pause(); }}; }