A Responsive YouTube Plugin for Jekyll
01 Apr 2015
This post introduces a plugin I developed to embed responsive YouTube videos in Jekyll websites. 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.
NOTE:
The Responsive YouTube Jekyll plugin is for self-hosted Jekyll sites. If you are
using Jekyll to host a website with GitHub Pages, this plugin will not work correctly. GitHub Pages does not run third-party Jekyll plugins for security reasons. However, you can use the Responsive YouTube Jekyll plugin with GitHub pages if you build your Jekyll website locally and push your website to GitHub, as described in this
SitePoint article.
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 Twitter Bootstrap’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>
</div>
which embeds the following video:
Download
The Responsive YouTube Plugin for Jekyll is open source on GitHub under the MIT License.