{{ message }}

Instantly share code, notes, and snippets.

Created Feb 12, 2012

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 %}

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
 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) # "" "" end Liquid::Template.register_tag "youtube", self end

### deanet commented Apr 6, 2012

thanks it;s work..

### 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 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 commented Nov 7, 2012

Works great, thanks!

### 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 commented Jan 26, 2013

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 commented Mar 28, 2013

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?

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 commented Apr 4, 2013

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 commented Jul 29, 2013

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 commented Oct 12, 2013

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

Source: Jekyll Docs

More reading: Using Jekyll Plugins on GitHub Pages

### patrickfuller commented Jan 12, 2014

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 commented Aug 14, 2014

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

### alejandrobabio commented Aug 13, 2015

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.

### Jcrash29 commented Feb 11, 2016

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

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Latest compiled and minified JavaScript -->


See my commit base on alejandrobabio's: Here

### 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.

### ltdinh commented Jun 4, 2016 • edited

@avclark.
Now It's 2016. I'm new in Jekyll. but I want to answer for @avclark.
If you want to use this: {% youtube{{ post.video }} %}. You only write: {% youtube post.video %}.
And override code above:

class YouTube < Liquid::Tag
Syntax = /^\s*([^\s]+)(\s+(\d+)\s+(\d+)\s*)?/

def initialize(tagName, markup, tokens)
super
@content = markup
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
end
end

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

end


As you see. I have added new row: They are @content = markup and @id = "#{context[@content.strip]}"
I have tried and It works well :)

But If you want to use: {% youtube post.video 500 600 %}. You must change something: you can try as this:

Syntax = /^\s_([^\s]+)(\s+(\d+)\s+(\d+)\s_)?/

def initialize(tagName, markup, tokens)
super
if markup =~ Syntax then
@url_id = $1  if$2.nil? then
@width = 560
@height = 420
else
@width = $2.to_i @height =$4.to_i
end
else
end


end

def render(context)
@id = "#{context[@url_id.strip]}"
end

end

### IgniparousTempest commented Feb 12, 2018 • edited

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

### dqvist commented Feb 6, 2019

It should be https src for the generated iframe code.
E.g.: