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.
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.
Responsive YouTube videos are included in a Jekyll post or page with a Liquid tag and the unique ID of the video:
For example, to embed the video with the link https://www.youtube.com/watch?v=tnq2gwBhvCc use the following tag:
tnq2gwBhvCc is the YouTube video ID.
which embeds the following video:
The Responsive YouTube Plugin for Jekyll is open source on GitHub under the MIT License.