Jekyll tag plugin for responsive YouTube video embeds

Update: I’ve added code to the plugin to take the width and height and calculate the necessary intrinsic ratio for the embed and insert the necessary CSS inline. This prevents the need for any JavaScript solutions on different aspect ratio embeds. Thanks to Andrew Clark for the tip.

I’ll keep this short because I know that not too many of my readers give a flying fire truck about Jekyll. If you’re one of the few, you can also skip straight to the README in my JekyllPlugins repository.

This is just a quick tag I whipped up. It was simple enough that I didn’t spend much time looking around to see if it already existed. It’s specifically for embedding YouTube videos with extra code to make them responsive. You pass it a YouTube video id (optionally a full embed or page/shortened url, it will extract the id) and — if needed — a width and height. It defaults to 640 x 480.

With the plugin installed, the following tag creates the video below.

{% youtube EfK-WX2pa8c 480 360 %}

And:

{% youtube http://youtu.be/YZNfwm7_Bgk %}

produces:

And with the updated code, adding a 16x9 ratio automatically includes the correct styles:

{% youtube a_426RiwST8 640 360 %}

produces:

Note that resizing the page causes the video to flex with the width of its container. This is done by wrapping the embedded iframe with a container div and applying the CSS:

.bt-video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden }

	.bt-video-container iframe,
	.bt-video-container object,
	.bt-video-container embed {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		margin-top:0 }

If you already have CSS similar to this in your stylesheet, you can adjust the class name on the wrapper and remove the line that inserts the style tag.

The code is in my JekyllPlugins repository on Github. Just drop the file “youtube_tag.rb” into your plugins folder and the tag will start working. Hope it’s helpful for somebody.