Mike Slinn

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 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;
}
* 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.