A Responsive YouTube Plugin for Jekyll


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.



http://usabilityetc.com/2015/04/responsive-youtube-jekyll-plugin/