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 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.

 

 

REAL QUICK TUTORIAL

 

TABLE OF CONTENTS

Download & Notes	Video Gallery	Useful Bits & Links
The End

 

 

 

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.

 

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, please feel free to comment below. I try to answer 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.

 

 

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>", 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", function(){
  for (let vid of document.querySelectorAll("#vid-gallery video")) {
    // (A) CLICK ON THUMBNAIL TO GO FULLSCREEN
    vid.addEventListener("click", function(){
      if (!this.fullscreenElement) {
        this.controls = true;
        this.requestFullscreen();
      }
    });
    
    // (B) EXIT FULLSCREEN MODE
    vid.addEventListener("fullscreenchange", function(){
      if (document.fullscreenElement == null) {
        this.controls = false;
        this.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.

 

 

NO BACKWARDS COMPATIBILITY!

Take extra note though – This simple video gallery rides on top of a number of modern HTML, CSS, and Javascript elements. So if you have to support the ancient browsers, this is not going to work… You will have to do some of your own homework on polyfills and stuff.

 

LINKS & REFERENCES

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