Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A Jekyll plugin for creating YouTube or Vimeo embed codes.

This is a Jekyll plugin for creating YouTube or Vimeo embed codes.

Usage

Put the plugin file video-embeds.rb in your _plugins directory. Create a tag specifying the type of video you want to embed with the first required argument, the video id.

{% youtube ab1234ab1 %}

You can also specify a height and width. If you do not, it defaults to 500 x 281.

{% vimeo 123456789 1920 1080 %}
class YouTube < Liquid::Tag
def initialize(tagName, markup, tokens)
super
args = markup.split(' ')
@id = args[0]
@width = 500
@height = 281
if args[1]
@width = args[1]
@height = args[2]
end
end
def render(context)
"<div class=\"youtube\"><iframe width=\"#{@width}\" height=\"#{@height}\" src=\"http://www.youtube.com/embed/#{@id}?color=white&theme=light\"> </iframe></div>"
end
Liquid::Template.register_tag("youtube", self)
end
class Vimeo < Liquid::Tag
def initialize(tagName, markup, tokens)
super
args = markup.split(' ')
@id = args[0]
@width = 500
@height = 281
if args[1]
@width = args[1]
@height = args[2]
end
end
def render(context)
"<div class=\"vimeo\"><iframe src='http://player.vimeo.com/video/#{@id}\" width=\"#{@width}\" height=\"#{@height}\" frameborder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen> </iframe></div>"
end
Liquid::Template.register_tag("vimeo", self)
end
Owner

ryanburnette commented Jul 29, 2013

I'm using redcarpet2 for my markdown processing and I'm not having any problems. This may or may not work with maruku processing at the moment.

| Illegal character '&' in raw string "http://www.youtube.com/embed/oHg5SJYRHA0?color=white&theme=light"
| Line: 1
| Position: 166
| Last 80 unconsumed characters:

whoops (using maruku)

wahn commented Aug 29, 2014

Shouldn't the Vimeo render line use a " instead of a ' character?

% diff _plugins/video-embed_old.rb _plugins/video-embed.rb
39c39
<     "<div class=\"vimeo\"><iframe src='http://player.vimeo.com/video/#{@id}\" width=\"#{@width}\" height=\"#{@height}\" frameborder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen> </iframe></div>"

---
>     "<div class=\"vimeo\"><iframe src=\"http://player.vimeo.com/video/#{@id}\" width=\"#{@width}\" height=\"#{@height}\" frameborder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen> </iframe></div>"
Owner

ryanburnette commented Dec 19, 2014

Just in case anyone is curious, I'm using Embedly for this task (and more) these days. This Jekyll plugin is a start for implementing it. https://github.com/robb/jekyll-embedly-client

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