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 1 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 2 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 3 I attended in Raleigh the other day. Enjoy some of my favorite bands I’ve been listening to since high school!
Comments