Skip to content

Instantly share code, notes, and snippets.

Created February 12, 2012 02:14
Show Gist options
  • Save joelverhagen/1805814 to your computer and use it in GitHub Desktop.
Save joelverhagen/1805814 to your computer and use it in GitHub Desktop.
Jekyll YouTube Embed Plugin

This is a plugin meant for Jekyll.

Example use:

Easily embed a YouTube video. Just drop this file in your _plugins directory.

{% youtube oHg5SJYRHA0 %}

You can also specify a height and width. If you do not, it defaults to 560 x 420.

{% youtube oHg5SJYRHA0 500 400 %}
class YouTube < Liquid::Tag
Syntax = /^\s*([^\s]+)(\s+(\d+)\s+(\d+)\s*)?/
def initialize(tagName, markup, tokens)
if markup =~ Syntax then
@id = $1
if $2.nil? then
@width = 560
@height = 420
@width = $2.to_i
@height = $3.to_i
raise "No YouTube ID provided in the \"youtube\" tag"
def render(context)
# "<iframe width=\"#{@width}\" height=\"#{@height}\" src=\"{@id}\" frameborder=\"0\"allowfullscreen></iframe>"
"<iframe width=\"#{@width}\" height=\"#{@height}\" src=\"{@id}?color=white&theme=light\"></iframe>"
Liquid::Template.register_tag "youtube", self
Copy link

IgniparousTempest commented Feb 12, 2018

I looked to see to see what the video link in the pointed to... I was not disappointed. Well played, sir.

Copy link

dqvist commented Feb 6, 2019

It should be https src for the generated iframe code.
"<iframe width="#{@width}" height="#{@height}" src="{@id}?color=white&theme=light\"></iframe>"

Copy link

jeffreytse commented May 7, 2020

jekyll-spaceship - 🚀 A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, mermail, emoji, youtube, vimeo, dailymotion, etc.



Copy link

sh1boot commented May 9, 2024

I couldn't use this directly, because Github-Pages or whatever, but having implemented my own one in the form of {% include youtube.liquid id="xyz" %} I wanted to point out that you can reference the thumbnail of the video directly, and put a button on top to play the video (add ?autoplay=1 so you don't have to click twice) so that your own page doesn't have to run a bunch of spurious javascript just to make a clickable image. Here's what I did:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment