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:

Gemfile

group :jekyll_plugins do 
  gem 'jekyll_video'
end 

And then execute:

Shell

$ bundle

Usage Example

HTML or markdown

{% video src="https://docs.evostream.com/sample_content/assets/bun33s.mp4" %}

The generated HTML is:

Generated HTML

<video class="jekyll_video shadow rounded" controls width="100%" style="">
  <source src="https://docs.evostream.com/sample_content/assets/bun33s.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 to style the HTML generated by the plugin:

Shell

.jekyll_video { }

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

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

Share to Twitter, Hacker News, LinkedIn.