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.

Creating a simple video gallery in PHP is as easy as:

  1. Get a list of video files from the folder – $vids = glob("GALLERY/*.{webm,mp4,ogg}", GLOB_BRACE);
  2. Output the HTML video tags – foreach ($vids as $v) { echo "<video controls src='". rawurlencode(basename($v)) ."'></video>"; }

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

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

SIMPLE VIDEO GALLERY

All right, let us now get into the video gallery itself.

 

1) VIDEO GALLERY PAGE

1-gallery.php
<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

2-theme.css
/* (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

3-gallery.js
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.

 

USEFUL BITS & LINKS

That’s all for this project, and here is a small section on some extras and links that may be useful to you.

 

COMPATIBILITY CHECKS

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

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

Simple PHP Video Gallery (Click To Enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

16 thoughts on “Very Simple PHP Video Gallery (No Database, From Folder)”

  1. Hi, thank you for this. I was hoping it would also grab videos from subfolders. so gallery/1/2/3/4 etc. Can you show me how to do that?
    This is what I tried: $dir = __DIR__ . DIRECTORY_SEPARATOR . “{gallery/,gallery/**/,gallery/**/**/,gallery/**/**/**,gallery/**/**/**/**}” . DIRECTORY_SEPARATOR;

  2. So Simple & Effective. Suits my purpose to a tee.
    On thing I tried to change was to make the controls visible by default on the thumb-nails.
    Can’t figure how to do that and it’s beyond the scope of my skills.
    I see I can right click on them one by one & show controls, then have multiple files playing in thumbnail view. Even better when viewing Sky-Cam time-lapse.

    Can you point me in the direction of what I need to change to do the above.

    Thanks.

    1. <video controls>

      I don’t get it. Could have just done a Google search for “HTML video show controls”, and the answer is right there in 1 minute flat???

  3. This is so awesome, and exactly what I was looking for in a simple video gallery.
    Thanks so much.

    However, I do have one question. I am using IFrames on my page, where the php would be within the IFrame.

    When doing this, clicking on the video does not expand it to full screen, and I’m wondering what changes to the javascript function would be needed to get it to work in an IFrame?

      1. Thanks. I’ll look at that link.
        Also, I should have said html frameset and not iframe. That’s my bad. 🙁

        The code I’m using is from 2007 and before the tag, where I have to manually code in every new video clip into the html; which is why I was finally getting around to looking at gallery options such as yours.

        The reason for the frames, is that I have a narrow, scrolling menu on the left-hand frame, which when an item was clicked, it would open up an html page in the right-hand frame, which was populated with the video clips corresponding to that menu item. Changing the html pages to your php code works perfectly at auto-generating the videos in the right-hand frame.

        I like the idea of having them play full screen, or even just full to the frame size, so I’ll keep looking at ways to get it to work. 🙂

  4. Hey man,

    thanks for the awesome script.

    Is there any way we can make the thumbnail work on iOS (Safari and Chrome) does not show the preview of the video!

    Many Thanks!

  5. Jorge Fernandez

    Great article, very simple and works perfectly.

    Quick question, do you have any idea on how I would go about implementing pagination for this example or the image gallery example? I have a lots of files I would like to view using this, but I’ve never used pagination without a DB, or would it be better to just create a DB with the contents of the folder?

    I really enjoy your posts, keep up the awesome work my friend!

    Thank you!

    1. Well, it’s still possible with some changes.

      1) Use PHP $videos = glob(...) as usual.
      2) Use it to generate a JS array instead.
      $all = count($videos);
      var jsvideos = [<?php foreach($videos as $i=>$v) { echo '"$k"'; if($i<$all) { echo ","; } } >];
      3) Create a JS function to generate the gallery instead.
      var pagenow = 0; var perpage = 10;
      var container = document.getElementById("vid-gallery");
      container.innerHTML = "";
      for (let i=pagenow*perpage; i<(pagenow+1)*perpage) { let vid = document.createElement("video"); vid.src=jsvideos[i]; container.appendChild(vid); }
      4) Lastly, create a dropdown pagination box somewhere that will fire the above function and change the page.

  6. Hi,
    This is great post and I was looking for something like this. And further..
    How we can set below.
    Title for each video
    Share option on each video, so users can quickly share on social media
    Thanks in advance..
    Debeve

    1. That is not “very simple”, but closer to a “full video gallery”. If you need all those features, I will highly suggest doing a search for other available packages… Trying to build all those on top of this one is going to be a pretty crazy process.

Leave a Comment

Your email address will not be published. Required fields are marked *