Very Simple PHP Video Gallery (No Database, From Folder)

Welcome to a tutorial on how to create a simple responsive PHP video gallery. Once upon a time in the stone age of the Internet, we have to struggle with all kinds of funky 3rd party video plugins to even play a single video. Fast forward today, things are really easy.

Yep, let us build a video gallery based on that – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes	Video Gallery	Useful Bits & Links
Tutorial Video	The End

 

 

 

QUICK NOTES

• Put all your video files into the gallery folder (no sample videos provided in the zip file).
• Launch 1-gallery.php and that’s all.

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

1) VIDEO GALLERY PAGE

<div id="vid-gallery"><?php
  // (A) GET ALL VIDEO FILES FROM THE GALLERY FOLDER
  $dir = __DIR__ . DIRECTORY_SEPARATOR . "gallery" . DIRECTORY_SEPARATOR;
  $videos = glob("$dir*.{webm,mp4,ogg}", GLOB_BRACE);
 
  // (B) OUTPUT ALL VIDEOS
  if (count($videos) > 0) { foreach ($videos as $vid) {
    printf("<video src='gallery/%s'></video>", rawurlencode(basename($vid)));
  }}
?></div>

We are practically just getting a list of all the videos in the gallery/ folder using glob() – Then simply outputting them into <video> tags.

 

 

2) CSS COSMETICS

/* (A) GALLERY - BIG SCREEN */
#vid-gallery {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-gap: 10px;
}
#vid-gallery video {
  width: 100%;
  cursor: pointer;
}
 
/* (B) GALLERY - SMALL SCREEN */
@media screen and (max-width: 1000px) {
  #vid-gallery { grid-template-columns: repeat(2, auto); }
}
@media screen and (max-width: 600px) {
  #vid-gallery { grid-template-columns: auto; }
}

No sweat, just some simple cosmetics for the video gallery. Basically, setting the #vid-gallery to display: grid, adjusting the number of columns on big and small screens.

 

 

3) JAVASCRIPT

window.addEventListener("DOMContentLoaded", () => {
  for (let vid of document.querySelectorAll("#vid-gallery video")) {
    // (A) CLICK ON THUMBNAIL TO GO FULLSCREEN
    vid.onclick = () => {
      if (!vid.fullscreenElement) {
        vid.controls = true;
        vid.requestFullscreen();
      }
    };
    
    // (B) EXIT FULLSCREEN MODE
    vid.onfullscreenchange = () => {
      if (document.fullscreenElement == null) {
        vid.controls = false;
        vid.pause();
      }
    };
  }
});

This may be the most “complicated” part, but keep calm and study closely.

• Essentially, get all the <video> tags when the window loads.
• (A) When the user clicks a video, we engage it in full-screen mode and show the video controls.
• (B) Stop playing the video and hide the control when the user disengages full-screen mode.

Easy.

 

 

COMPATIBILITY CHECKS

• Arrow Function – CanIUse
• CSS Grid Layout – CanIUse
• Fullscreen API – CanIUse

Yep, the “very advanced” iPhone is still not supporting fully Fullscreen API at the time of writing. Use the Modernizr library to detect the required features if you want, do a fallback or alternative.

 

LINKS & REFERENCES

• HTML5 Video – Wikipedia
• HTML Video Tag – MDN
• CSS Grid – MDN
• Fullscreen API – MDN

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET