Embedding a video gallery in Jekyll websites

A simple tutorial on embedding a video gallery in a Minimal Mistakes themed Jekyll website.

The Minimal Mistakes theme ¹ for Jekyll websites by Michael Rose offers a great way to embed images in a gallery layout. I wanted to do the same for videos. In this post I will show you how I achieved that.

First, we create a gallery layout using a custom CSS by adding the following snippet in assets/css/main.scss.

.video-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Space between the videos */
  justify-content: space-between;
}

.video-item {
  flex: 1 1 calc(33.33% - 20px); /* 33.33% width for 3 items per row */
  margin-bottom: 20px; /* Space between rows */
}

.video-item video {
  width: 100%; /* Make videos responsive */
  height: auto;
}

Here, we use flex-wrap:wrap; to wrap items onto the next line. flex: 1 1 calc(33.33% - 20px); ensures that each video takes up one-third of the available space (minus the gap) such that we limit 3 videos per row. You can modify this according to your needs.

Next, in your markdown file you can embed the video gallery using a HTML structure as follows.

<div class="video-gallery">
  <div class="video-item">
    <video width="560" height="315" controls>
      <source src="/assets/videos/video1.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
  <div class="video-item">
    <video width="560" height="315" controls>
      <source src="/assets/videos/video2.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
  <div class="video-item">
    <video width="560" height="315" controls>
      <source src="/assets/videos/video3.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
  <!-- Add more video items as needed -->
</div>

Optionally, you may also want to set,

toc: false
classes: wide

in your YAML front matter to ensure all the available space is being used for the gallery layout.

On some browsers (e.g.- Chrome), .mov files aren’t rendered correctly so we have to convert them to .mp4 with the H.264 codec. I used the ffmpeg ² utility to do the conversion as follows,

ffmpeg -i video1.mov -vcodec h264 -acodec aac video1.mp4

To showcase the gallery layout view, I am sharing some videos I captured from a Breaking Benjamin, Staind, Daughtry and Lakeview concert ³ I attended in Raleigh the other day. Enjoy some of my favorite bands I’ve been listening to since high school!

References

1. https://mmistakes.github.io/minimal-mistakes/ ↩

2. https://www.ffmpeg.org ↩

3. https://www.livenationentertainment.com/2024/03/rock-icons-staind-and-breaking-benjamin-announce-co-headline-tour-with-special-guests-daughtry-and-lakeview/ ↩