×

Adding video backgrounds with jekyll front-matter

Written by Kevin Hougasian
3
This post is days old.

Most of our web properties run on jekyll, ebrokersoftware.com, theagentsurvivalguide.com, and more slated for the coming year.

The RIMdev blog lets up both document and play with what may, or may not, work.

What about Video headers?

Glad you asked! We currently check the post front matter and, if image: is listed, serve accordingly.

{% if page.image %}
  {% assign postImage = page.image %}
{% elsif post.image %}
  {% assign postImage = post.image %}
{% else %}
  {% assign postImage = site.default_image %}
{% endif %}

Why page AND post? Our main page is assigned as a post.

HTML5 video and fallback

Let’s load the video in our front matter, and handle fallback and poster image in the post in our include. We’re only dealing with .mp4 and .webm here. Video conversion? Cloud convert does a decent job for now. So now we have:

---
layout: post
video: /video/clouds_over_the_mountain
---

We could have used a collection and repeated our 3 formats with the same name, but a single entry with now extention makes more sense while listing the path.

Now we’re checking for and image or video:

{% if page.image %}
  {% assign postImage = page.image %}
{% elsif post.image %}
  {% assign postImage = post.image %}
{% else %}
  {% if page.video %}
    {% assign postVideo = page.video %}
  {% elsif post.video %}
    {% assign postVideo = post.video %}
  {% else %}
    {% assign postImage = site.default_image %}
  {% endif %}
{% endif %}

<video class="background"
	loop
	muted
	autoplay
	preload="auto"
	poster="{{ postVideo }}.png">
<source src="{{ postVideo }}.mp4" type="video/mp4">
<source src="{{ postVideo }}.webm" type="video/webm">
</video>

What options do I have?

The HTML5 Video Events and API page is a good place to start. You can see everything the API exposes and what may suite your needs. Check out this link for more on the element itself and attribute definitions.

Setting as background

Now we have to emulate background-position: cover; and we’re done.

  video.background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translate(-50%, -50%);
  }

Summary

Enjoy adding video to your jekyll project. Video content in this post is from the good folks at DISTILL.

Kevin Hougasian
Kevin Hougasian
Lead Frontend Developer
jekyll
video
liquid
Suggested reading

A Double-Click Experience for Running Jekyll on Windows

jekyll
Typically, running a Jekyll site locally for the first time requires a basic ...
Read now

Using Stuntman with ASP.NET MVC Video

video
Transcript Hello my name is Khalid Abuhakmeh and in this video I’ll be p...
Read now

Design Dilemma: Windows Azure Management, Jekyll, and Deployments

jekyll
We are all in when it comes to static site generation. With Windows Azure Git...
Read now

Converting MP4 To Webm Using FFMPEG and Bash

jekyll video
We just recently added video headers to our blog because videos are awesome. ...
Read now

Running Jekyll on Kestrel and ASP.NET Core

jekyll
Jekyll is a big part of what we do at Ritter Insurance Marketing. The platfor...
Read now

Comments

Stay fresh! The brighter green, the fresher the article!