Skip to content
Create a gist now

Instantly share code, notes, and snippets.

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)
super
if markup =~ Syntax then
@id = $1
if $2.nil? then
@width = 560
@height = 420
else
@width = $2.to_i
@height = $3.to_i
end
else
raise "No YouTube ID provided in the \"youtube\" tag"
end
end
def render(context)
# "<iframe width=\"#{@width}\" height=\"#{@height}\" src=\"http://www.youtube.com/embed/#{@id}\" frameborder=\"0\"allowfullscreen></iframe>"
"<iframe width=\"#{@width}\" height=\"#{@height}\" src=\"http://www.youtube.com/embed/#{@id}?color=white&theme=light\"></iframe>"
end
Liquid::Template.register_tag "youtube", self
end
@deanet
deanet commented Apr 6, 2012

thanks it;s work..

@avclark
avclark commented Sep 28, 2012

Is it possible to bring in the youtube id via post variable. So in my front matter I would have something like video: oHg5SJYRHA0 and then in the post I could call it with {% youtube{{ post.video }} %}.

I don't know if that's even possible, but I need to place the video in a specific spot, not with the main content.

@incompl
incompl commented Oct 20, 2012

Was giving me an error because of the & in the string, but I tweaked it to make it work. Thanks!

@davefp
davefp commented Nov 7, 2012

Works great, thanks!

@tmtxt
tmtxt commented Dec 31, 2012

I break the footer of my jekyll site

edit: the problem is not because of the plugin, it belongs to youtube

@markusjura

Breaked the html layout for me as well. I fixed it by changing the youtube.rb as follows (using maruku as markdown):

def render(context)
   "<iframe width=\"#{@width}\" height=\"#{@height}\" src=\"http://www.youtube.com/embed/#{@id}\" frameborder=\"0\">        </iframe>"
end

You need to remove 'allowfullscreen' and you need to have spaces between the iframe tags

@carlosdelfino

Hello @joelverhagen and all.

I'm sorry if the question look stupid.

To run this plugin on GitHub I just put it in the plugin folder?

It is already approved?

Leveraging where can I get a list of approved plugins to work on GitHub.

Where can I find a plugin for github approved to administer a gallery of images?

@marcokeur

I have more or less the same question as @carlosdelfino

Build a new blog with the youtube.rb file in de plugin folder, but now my doesn't build on github because of the plugin. Is there a way to fix it?

@ryanburnette

This didn't work for me. The argument variables were all blank. I also had problems with maruku processing the generated markup.

I needed Vimeo support added to it so I went ahead and forked and got my mods working. Here they are if anyone else wants to take a look. https://gist.github.com/ryanburnette/6107142

@codekirei

@carlosdelfino @marcokeur

GitHub Pages utilizes Jekyll's --safe mode, so all plugins are disabled.

Source: Jekyll Docs

More reading: Using Jekyll Plugins on GitHub Pages

@patrickfuller

I had to make two minor edits for this to work.

Line 2:

- Syntax = /^\s*([^\s]+)(\s+(\d+)\s+(\d+)\s*)?/
+ Syntax = /^\s*([^\s]+)(?:\s+(\d+)\s+(\d+)\s*)?/

and line 24:

- "<iframe width=\"#{@width}\" height=\"#{@height}\" src=\"http://www.youtube.com/embed/#{@id}?color=white&theme=light\"></iframe>"
+ "<iframe width=\"#{@width}\" height=\"#{@height}\" src=\"http://www.youtube.com/embed/#{@id}?color=white&amp;theme=light\">&nbsp;</iframe>"

The first edit ensures that the match groups line up for optional width + height args, and the second escapes the ampersand and adds whitespace to the iframe to prevent text below the video being cut off (ref).

Anyway, thanks for posting this gist!

@tuananh
tuananh commented Aug 14, 2014

A bit more pagespeed-friendly https://github.com/tuananh/BetterTube

@pradeekyahvi

hi i got an error from github "youtube is not recognize as a liquid tag" , please help on this .

@alejandrobabio

Hi @pradeekyahvi. I got the same issue, it's because github pages only support some plugins. I fix my issue with coffeescript. It's all at this commit.

Edit:
This is true if you are trying to make work this plugin with Github Pages. At your local computer, just put the source at _plugins directory.

@BananaSlug

Don't forget to add the following lines above the other script call:

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.4/js/jquery.mmenu.min.all.js"></script>

See my commit base on alejandrobabio's: Here

@guodidi
guodidi commented Mar 27, 2016

Hello , i try to use the plugins in Jekyll , and i found it has some mistake. The Tag of also has the same height and width because of the Syntax has a mistake. i use the wiebsite a Ruby regular expression editor to test.

If i use your Syntax that is ^\s([^\s]+)(\s+(\d+)\s+(\d+)\s)? , and input YouTube_id 400 800 ,the editor will show me 4 variable ( second variable and third variable is similar) . so i think maybe your Syntax but not quick right. i try to modify the Syntax that is^\s([^\s]+)\s(\d+)?\s(\d+)?\s? and it can work.

so if possible , i hope you can check the Syntax again. Because your plugins is recommand in Jekll Plugins , maybe other people will found the same problem with me .

and thank you again.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.