Published 2020-10-03.
Last modified 2023-11-08.
Time to read: 1 minutes.
This page is part of the
jekyll_plugins
collection, categorized under Jekyll.
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 generatedvideo
element; provide any value compatible with HTML5.
Example 1:classes=""
removes classesshadow
androunded
and leaves thejekyll_video
class.
Example 2:classes="blah"
causes classesjekyll_video
andblah
to be applied. -
style
– specifies CSS to be applied to the generatedvideo
element. width
– provide any value compatible with HTML5, e.g.width="50%"
, andwidth="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; }