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