Instantly share code, notes, and snippets.

Embed
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

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

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?

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?

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?

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

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

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

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

codekirei commented 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

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

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

This comment has been minimized.

Show comment
Hide comment
@tuananh

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 .

pradeekyahvi commented Aug 6, 2015

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.

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

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

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) -->
<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