Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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

This comment has been minimized.

Show comment Hide comment
@deanet

deanet Apr 6, 2012

thanks it;s work..

deanet commented Apr 6, 2012

thanks it;s work..

@avclark

This comment has been minimized.

Show comment Hide comment
@avclark

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

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

This comment has been minimized.

Show comment Hide comment
@incompl

incompl Oct 20, 2012

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

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

This comment has been minimized.

Show comment Hide comment
@davefp

davefp Nov 7, 2012

Works great, thanks!

davefp commented Nov 7, 2012

Works great, thanks!

@tmtxt

This comment has been minimized.

Show comment Hide comment
@tmtxt

tmtxt Dec 31, 2012

I break the footer of my jekyll site

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

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

This comment has been minimized.

Show comment Hide comment
@markusjura

markusjura 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

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

This comment has been minimized.

Show comment Hide comment
@carlosdelfino

carlosdelfino 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?

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?

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

This comment has been minimized.

Show comment Hide comment
@marcokeur

marcokeur 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?

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 comment has been minimized.

Show comment Hide comment
@ryanburnette

ryanburnette 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

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

This comment has been minimized.

Show comment Hide comment
@codekirei

codekirei Oct 12, 2013

@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

@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

This comment has been minimized.

Show comment Hide comment
@patrickfuller

patrickfuller 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!

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

This comment has been minimized.

Show comment Hide comment
@tuananh

tuananh Aug 14, 2014

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

tuananh commented Aug 14, 2014

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

@pradeekyahvi

This comment has been minimized.

Show comment Hide comment
@pradeekyahvi

pradeekyahvi Aug 6, 2015

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

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

@alejandrobabio

This comment has been minimized.

Show comment Hide comment
@alejandrobabio

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

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

This comment has been minimized.

Show comment Hide comment
@Jcrash29

Jcrash29 Feb 11, 2016

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

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

This comment has been minimized.

Show comment Hide comment
@guodidi

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

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

This comment has been minimized.

Show comment Hide comment
@ltdinh

ltdinh Jun 4, 2016

@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
      raise "No YouTube ID provided in the \"youtube\" tag"
    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>"
    "<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

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
  raise "No YouTube ID provided in the \"youtube\" tag"
end

end

def render(context)
@id = "#{context[@url_id.strip]}"
"<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

ltdinh commented Jun 4, 2016

@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
      raise "No YouTube ID provided in the \"youtube\" tag"
    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>"
    "<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

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
  raise "No YouTube ID provided in the \"youtube\" tag"
end

end

def render(context)
@id = "#{context[@url_id.strip]}"
"<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

@IgniparousTempest

This comment has been minimized.

Show comment Hide comment
@IgniparousTempest

IgniparousTempest Feb 12, 2018

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

IgniparousTempest commented Feb 12, 2018

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

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