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
HTML CSS VIDEO GALLERY
All right, let us now get into the details of building a simple responsive video gallery with HTML, CSS, and a little bit of Javascript.
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”:
- On window load, we attach “click to play video in full screen”.
- Click on a thumbnail to go fullscreen, and click again to exit fullscreen.
The end.
DOWNLOAD & NOTES
Here is the download link to the example code, so you don’t have to copy-paste everything.
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 BITS & LINKS
That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.
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">
- You can “encourage” search engines to preload the video metadata –
LINKS & REFERENCES
- HTML5 Video – Wikipedia
THE END
Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!