Mike Slinn


Published 2020-10-03. Last modified 2023-11-08.
Time to read: 1 minutes.

This page is part of the jekyll_plugins collection.

jekyll_video is a Jekyll tag plugin that embeds an HTML5 video into a web page.


Add the following highlighted line to your Jekyll project's Gemfile, within the jekyll_plugins group:

group :jekyll_plugins do 
  gem 'jekyll_video'

And then execute:

$ bundle

Usage Example

{% video src="https://file-examples.com/storage/fe9d743740654a8139a48e1/2017/04/file_example_MP4_480_1_5MG.mp4" %}

The generated HTML is:

<video class="jekyll_video shadow rounded" controls width="100%" style="">
  <source src="https://file-examples.com/storage/fe9d743740654a8139a48e1/2017/04/file_example_MP4_480_1_5MG.mp4">

Which renders as the following:


Options include:

  • classes – specifies classes for the generated video element; provide any value compatible with HTML5.
    Example 1: classes="" removes classes shadow and rounded and leaves the jekyll_video class.
    Example 2: classes="blah" causes classes jekyll_video and blah to be applied.
  • style – specifies CSS to be applied to the generated video element.
  • width – provide any value compatible with HTML5, e.g. width="50%", and width="200px"


The following CSS could be used in order for the plugin:

.jekyll_video { }

.rounded {
  border: 1px solid;
  border-radius: 7px;

.shadow {
  border: thin gray solid;
  box-shadow: 5px 5px 6px #999;

* indicates a required field.

Please select the following to receive Mike Slinn’s newsletter:

You can unsubscribe at any time by clicking the link in the footer of emails.

Mike Slinn uses Mailchimp as his marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp’s privacy practices.