Very Simple Video Gallery In HTML CSS (Free Download)

Welcome to a tutorial on how to create a simple video gallery in HTML CSS. So you want to share some videos online, but don’t want to go through all of those “crazy video platforms”? Well, here’s a simple video gallery without any server-side scripts – Read on!

 

 

TABLE OF CONTENTS

 

 

 

PART 1) HTML GALLERY PAGE

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

<!-- (B) VIDEO GALLERY -->
<div class="gallery">
  <div class="vWrap">
    <video src="gallery/1.mp4"></video>
    <div class="vCaption">Video A</div>
  </div>
  <div class="vWrap">
    <video src="gallery/2.mp4"></video>
    <div class="vCaption">Video B</div>
  </div>
</div>

• Create a gallery folder, and put all your video files inside.
• (B) Modify the <gallery> section, and add your list of videos.
• (A) Leave this alone – This is the “close” button when a video is playing on full screen.

Yep, that’s all for the HTML page.

 

 

PART 2) GALLERY CSS

/* (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; }
 
/* (D) CAPTION */
.vWrap {
  color: #fff;
  background: #000;
}
.vCaption { padding: 10px; }

This may look confusing at first, but here’s a quick walkthrough:

• (B) On big screens, we lay 3 videos per row. On small screens, change the layout to 2 videos per row.
• (B1) Styles for the thumbnail videos, object-fit controls the resizing behavior. Change this and see which one is best for you.
• (B2) When the user clicks on a video, we add a .full CSS class on it. This section simply sets the selected video to fill up the entire window.
• (C & D) Styles for the “close fullscreen video” and thumbnail captions.

 

 

PART 3) GALLERY 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;

Finally, a little bit of Javascript to drive “fullscreen videos”:

1. On window load, we attach “click to play video in full screen”.
2. Click on a thumbnail to go fullscreen, and click again to exit fullscreen.

The end.

 

 

 

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.

 

 

THE VIDEO IS NOT LOADING

• Take note that different browsers support different video formats. The safest format at the time of writing is H.264 MP4 – See the Wikipedia link below for the full list.
• Depending on the browser and Internet connection, some browsers may not preload and display the thumbnail/preview.
  • You can “encourage” search engines to preload the video metadata – <video preload="metadata" src="...">. No guarantee though, it’s still up to the browser.
  • Alternatively, you can set a poster manually – <video poster="image.jpg">

 

 

LINKS & REFERENCES

• HTML5 Video – Wikipedia