jekyll_video

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

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

Installation

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

Shell

group :jekyll_plugins do 
  gem 'jekyll_video'
end

And then execute:

Shell

$ bundle

Usage Example

Shell

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

The generated HTML is:

Shell

<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">
</video>

Which renders as the following:

Options

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"

CSS

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

Shell

.jekyll_video { }

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

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