Embedding Responsive Video Players in Jekyll Site with Custom Layouts

Help
1

Hi everyone,

I’m building a website with Jekyll to showcase video editing tutorials and projects. I’ve been struggling to embed responsive video players on custom layouts for blog posts and portfolio pages. Here are the main issues I’m facing:

  1. Responsiveness Problem: When embedding videos (e.g., YouTube, Vimeo, or self-hosted MP4 files) using <iframe> or <video> tags, they don’t resize properly on smaller screens. I’ve tried wrapping them in a container with CSS styles for responsiveness, but the results are inconsistent across devices.Here’s the CSS I’m using:
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
}
.video-container iframe, 
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Liquid Tags in Markdown: I want to use custom Liquid tags in Markdown files to simplify embedding videos. For example, something like:

{% video src="video.mp4" type="mp4" %}

  1. However, I’m unsure how to implement this in _includes or _layouts to make it reusable across posts.
  2. Lazy Loading for Performance: Some pages have multiple videos, and I’d like to enable lazy loading to improve performance. I’ve read about adding the loading="lazy" attribute, but I’m unsure how to integrate it efficiently with Jekyll’s templates and loops.
  3. Video Thumbnail Overlay: For self-hosted videos, I want to display a thumbnail with a play button overlay that starts the video when clicked. Is there a simple way to implement this using Jekyll templates?

Has anyone tackled similar issues when working with Jekyll and video content? Any advice or code examples for making videos responsive, implementing custom Liquid tags, or optimizing performance would be a huge help!

Thanks in advance!

2

some basic styles that work for me, first one is a div containing the iframe:

.responsive-video {
    height: 0;
    padding-top: 1px;
    position: relative;
    margin-bottom: -3px;
    padding-bottom: 56.25%;
}
.responsive-video iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

iframe itself:

<iframe width="940" height="480" src="//www.youtube.com/embed/Zt45IWLTrBs?modestbranding=1;autohide=1&amp;amp;showinfo=0&amp;amp;rel=0" frameborder="0" allowfullscreen=""></iframe>

example - though this is using next.js not jekyll which should not matter. Before changing to Next I am fairly sure I used the same code.

as for your other issues, your example of what you want to do as a snippet should work as an include, you can pass parameters into an include much like you have, then use them in the includes code. The docs for includes have an example of how to use parameters.

Not sure about lazy loading or the thumbnail overlays, one thing at a time. An AI can probably help you with most of this.

3

Thanks so much for your response! I appreciate you sharing the CSS snippet for responsive videos and confirming that the approach works consistently across frameworks like Next.js and Jekyll. I’ll definitely give this a try to see if it resolves the responsiveness issues I’ve been facing.

Regarding the example for includes, it’s reassuring to know that parameters can be passed in a similar way. I’ll dive deeper into Jekyll’s documentation on includes and experiment with the {% include %} syntax to implement custom Liquid tags for embedding videos dynamically.

For lazy loading and thumbnail overlays, I’ll tackle those next, but your suggestion to focus on one thing at a time makes sense. I might explore AI tools for assistance, as you suggested—good idea! :slightly_smiling_face: :grinning:

Thanks again for pointing me in the right direction. I’ll update the thread if I make significant progress or come across a solid solution for the remaining challenges.

4

We do something like this in our template site. Check our _includes/video.liquid and how we use it in a blog post.