A Responsive YouTube Plugin for Jekyll

This articles introduces a plugin I developed to embed responsive YouTube videos in Jekyll websites using Bootstrap 4. Jekyll is a static website generator that is extended with plugins written in Ruby. Responsive videos automatically adjust their dimensions to fit the HTML element in which they are embedded, even when the size of that element changes. Furthermore, the dimensions of responsive videos always maintain the aspect ratio.

Installation

Download the responsive-youtube-jekyll-tag.rb file from GitHub and copy it into the _plugins folder of your Jekyll website. If you are monitoring changes with jekyll serve you will need to stop Jekyll and re-run jekyll serve to make Jekyll notice the new plugin.

Use

Responsive YouTube videos are included in a Jekyll post or page with a Liquid tag and the unique ID of the video:

{ % youtube <YOUTUBE VIDEO ID> %}

Example

For example, to embed the video with the link https://www.youtube.com/watch?v=tnq2gwBhvCc use the following tag:

{ % youtube tnq2gwBhvCc %}

tnq2gwBhvCc is the YouTube video ID.

The plugin uses Bootstrap 4’s responsive embed CSS and JavaScript to make YouTube videos responsive. The example liquid tag above will insert the following HTML and Bootstrap CSS classes into the post or page:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" width="560" height="315"
    src="https://www.youtube.com/embed/tnq2gwBhvCc" frameborder="0"
    allowfullscreen=""></iframe>
</di>

which embeds the following video:

Download

The Responsive YouTube Plugin for Jekyll is open source on GitHub under the MIT License.