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 to today, things are really easy.

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

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

 

PART 1) VIDEO GALLERY PAGE

<!-- (A) CLOSE FULLSCREEN VIDEO -->
<div id="vClose" onclick="vplay.toggle(false)">X</div>

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

1. <div id="vClose"> This “close” button will only show when a video is in fullscreen.
2. As in the introduction – Get all video files in the gallery folder, and output them into <video> tags.

 

 

PART 2) CSS COSMETICS

/* (A) GALLERY WRAPPER */
/* (A1) BIG SCREENS - 3 IMAGES PER ROW */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  max-width: 1200px;
  margin: 0 auto; /* horizontal center */
}
 
/* (A2) SMALL SCREENS - 2 IMAGES PER ROW */
@media screen and (max-width: 768px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
 
/* (B) GALLERY VIDEOS */
/* (B1) THUMBNAIL VIDEO */
.gallery video {
  width: 100%;
  height: 200px;
  object-fit: cover; /* fill | contain | cover | scale-down */
  cursor: pointer;
}
 
/* (B2) FULLSCREEN VIDEO */
.gallery video.full {
  position: fixed;
  top: 0; left: 0; z-index: 999;
  width: 100vw; height: 100vh;
  background: #000;
  object-fit: scale-down;
}

/* (C) EXIT FULLSCREEN */
#vClose {
  position: fixed; display: none;
  top: 0; right: 0; z-index: 9999;
  font-size: 20px; font-weight: 700;
  padding: 10px 15px;
  color: #fff;
  background: #741414;
  cursor: pointer;
}
#vClose.show { display: block; }

There’s quite a bit of CSS, but keep calm and let’s walk through the important mechanics:

• (A1) display: grid and grid-template-columns: repeat(3, 1fr) pretty much does the “3 videos per row” layout magic.
• (A2) On small screens, we change the layout to 2 videos per row.
• (B1) width: 100% and height: 200px will automatically resize the videos, but the videos will be “out of proportion”. We use object-fit to change the resize behavior, change this and see for yourself; Pick one that you like.
• (B2) On clicking a thumbnail video, we set it to fullscreen. Pretty much 100% viewport width and height, and a fixed position.
• (C) The “close fullscreen video” button, place at the top right-hand corner.

 

 

PART 3) JAVASCRIPT

var vplay = {
  // (A) INIT - CLICK VIDEO TO GO FULL SCREEN
  init : () => { for (let v of document.querySelectorAll(".gallery video")) {
    v.onclick = () => {
      if (!v.classList.contains("full")) { vplay.toggle(v); }
    };
  }},
 
  // (B) TOGGLE FULLSCREEN
  toggle : e => {
    // (B1) TOGGLE CLOSE BUTTON
    document.getElementById("vClose").classList.toggle("show");
 
    // (B2) TOGGLE VIDEO
    let v = e===false ? document.querySelector(".gallery .full") : e ;
    v.classList.toggle("full");
    v.controls = e===false ? false : true ;
    if (e===false) { v.pause(); }
  }
};
window.onload = vplay.init;

A bit of Javascript to drive the “click to fullscreen video”.

1. On window load, init() will attach “click to toggle fullscreen” on all gallery videos.
2. To toggle the fullscreen video. Basically, add/remove the full CSS class on the selected video.

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

EXTRA) FILE NAME AS VIDEO CAPTION

// (B2) OUTPUT VIDEOS
if (count($vid) > 0) { foreach ($vid as $v) {
  $file = basename($v);
  $caption = substr($file, 0, strrpos($file, ".")); 
  printf("<div class='vWrap'>
    <video src='gallery/%s'></video>
    <div class='vCaption'>%s</div>
  </div>", rawurlencode($file), $caption);
}}

There is no database, but we can still use the file name as the caption.

 

 

EXTRA) SORTING THE VIDEOS

usort($vid, function ($file1, $file2) {
  return filemtime($file2) <=> filemtime($file1); 
});

usort($vid, function ($file1, $file2) {
  return filemtime($file1) <=> filemtime($file2);
});

sort($vid); // ascending
rsort($vid); // descending

 

EXTRA) MULTIPLE CATEGORIES

<h1>CATEGORY A</h1>
<div class="gallery"><?php
  $vid = glob(FOLDER A);
  foreach ($vid as $v) { printf("<video ...>"); }
?></div>
 
<h1>CATEGORY B</h1>
<div class="gallery"><?php
  $vid = glob(FOLDER B);
  foreach ($vid as $v) { printf("<video ...>"); }
?></div>

Same old “get the list of files and output HTML”, just keep your video files in different folders.

 

EXTRA) READ ANOTHER FOLDER

$vid = array_merge(
  $vid, glob("ANOTHER-FOLDER*.{webm,mp4,ogg}", GLOB_BRACE)
);

This is an alternative to reading multiple folders, just use array_merge() to combine the results. But of course, this is only good as a “quick fix”, this is not good if you have a dozen folders.

 

VIDEO FORMAT SUPPORT & POSTER

• Different browsers support different video formats, the safest format at the time of writing is H.264 MP4 – See the Wikipedia HTML5 Video link below for the full list.
• Depending on the Internet connection and/or video format, some browsers may not even preload the video and show a thumbnail. You can set a poster image to show while the video is still loading – <video poster="IMAGE.JPG">.
• Alternatively, you can “encourage” the browser to preload a fragment of the video by changing the preload behavior – <video preload="metadata">.

 

COMPATIBILITY CHECKS

• Arrow Function – CanIUse
• CSS Grid Layout – CanIUse

This simple gallery will work on all modern browsers.

 

LINKS & REFERENCES

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

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET