public
Last active

Jekyll YouTube Embed Plugin

  • Download Gist
README.md
Markdown

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 %}
youtube.rb
Ruby
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
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

thanks it;s work..

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.

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

Works great, thanks!

I break the footer of my jekyll site

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

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

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?

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?

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

@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

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!

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.