Skip to content

Instantly share code, notes, and snippets.

@vanto
Last active December 23, 2021 21:28
  • Star 50 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save vanto/1455726 to your computer and use it in GitHub Desktop.
OEmbed Liquid Tag for Jekyll

OEmbed Liquid Tag for Jekyll

This is a simple liquid tag that helps to easily embed images, videos or slides from OEmbed enabled providers. It uses Magnus Holm's great oembed gem which connects to the OEmbed endpoint of the link's provider and retrieves the HTML code to embed the content properly (i.e. an in-place YouTube player, Image tag for Flickr, in-place slideshare viewer etc.). By default it supports the following OEmbed providers (but can fallback to Embed.ly or OoEmbed for other providers):

  • Youtube
  • Flickr
  • Viddler
  • Qik
  • Revision3
  • Hulu
  • Vimeo
  • Instagram
  • Slideshare
  • Yfrog
  • MlgTv

How to install

  1. Make sure you have the ruby-oembed gem (Rubygems, Github) installed.
  2. Copy oembed.rb to <your-jekyll-project>/_plugins
  3. You're done.

If you're experiencing troubles with Ruby 2.x, please also add require 'openssl' to the script.

How to use

Place a oembed tag in your content file. E.g.

<h1>An embedded video</h1>
{{ oembed http://www.youtube.com/watch?v=Sv5iEK-IEzw }}

<h1>An embedded presentation</h1>
{{ oembed http://www.slideshare.net/AmitRanjan/quick-tour }}

The oembed tag behaves almost compatible to Robert Böhnke's Embed.ly Tag, i.e. it wraps the embed code in a <div> tag that has classes matching the embeds type, provider as well as the generic embed. In contrast to the embed.ly tag, we don't support overriding certain oembed properties.

Author

Tammo van Lessen -- http://www.taval.de

License

This code snippet is licensed under Apache License 2.0

##
# OEmbed Liquid Tag for Jekyll
# - requires https://github.com/judofyr/ruby-oembed/
#
# Copyright 2011 Tammo van Lessen
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
##
require 'oembed'
require 'uri'
# register all default OEmbed providers
::OEmbed::Providers.register_all()
# since register_all does not register all default providers, we need to do this here. See https://github.com/judofyr/ruby-oembed/issues/18
::OEmbed::Providers.register(::OEmbed::Providers::Instagram, ::OEmbed::Providers::Slideshare, ::OEmbed::Providers::Yfrog, ::OEmbed::Providers::MlgTv)
::OEmbed::Providers.register_fallback(::OEmbed::ProviderDiscovery, ::OEmbed::Providers::Embedly, ::OEmbed::Providers::OohEmbed)
module Jekyll
class OEmbed < Liquid::Tag
def initialize(tag_name, text, tokens)
super
@text = text
end
def render(context)
# pipe param through liquid to make additional replacements possible
url = Liquid::Template.parse(@text).render context
# oembed look up
result = ::OEmbed::Providers.get(url.strip!, :format => :xml)
# Odd: slideshare uses provider-name instead of provider_name
provider = result.fields['provider_name'] || result.fields['provider-name'] || 'unknown'
"<div class=\"embed #{result.type} #{provider}\">#{result.html}</div>"
end
end
end
Liquid::Template.register_tag('oembed', Jekyll::OEmbed)
@harikt
Copy link

harikt commented May 25, 2012

Hi ,
Does this works for github ? I have this at https://github.com/auraphp/auraphp.github.com/blob/master/_plugins/oembed.rb

and post

https://github.com/auraphp/auraphp.github.com/blob/master/_posts/2012-05-25-slides-from-talk-decoupled-library-packages-for-php.markdown

I guess we cannot install any other libraries in github. I am not familiar with ruby also .

Thanks for the help.

@vanto
Copy link
Author

vanto commented May 25, 2012

AFAIK, github does not allow 3rd party plugins for its Jekyll based site generation, so you'd need to setup your own.

@harikt
Copy link

harikt commented May 25, 2012 via email

@yyolk
Copy link

yyolk commented Jun 8, 2012

I'm having a very hard time getting this to work.

My loop in my Jekyll Template:

        {% if page.oembed %}
            {% for url in page.oembed %}
                {{ oembed url }}
            {% endfor %} 
        {% endif %}

This doesn't produce what is supposed to happen… and I'm at a lost to why it is in the first place.

@vanto
Copy link
Author

vanto commented Jun 8, 2012

If you want to use a variable, you need to use liquid again. Please try this:

{% if page.oembed %}
    {% for url in page.oembed %}
        {% oembed {{url}} %}
    {% endfor %} 
{% endif %}

@yyolk
Copy link

yyolk commented Jun 8, 2012

You are my hero! That solved my issue!!

@jmoz
Copy link

jmoz commented Apr 10, 2013

Is there a reason why this doesn't work with Twitter? Keep getting ::OEmbed::NotFound errors.

@dandunckelman
Copy link

I followed your sample steps, and it works when I use ruby-1.9.3-p194. But it errors when using ruby-2.0.0-p0. Here's the stack trace:

dldunckel@work-dan:~/code/sandbox/oembed/sample.sites.com$ jekyll --no-server
Configuration from /home/dldunckel/code/sandbox/oembed/sample.sites.com/_config.yml
Building site: /home/dldunckel/code/sandbox/oembed/sample.sites.com -> /home/dldunckel/code/sandbox/oembed/sample.sites.com/_site
Liquid Exception: uninitialized constant OEmbed::Provider::OpenSSL in index.html
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/gems/ruby-oembed-0.8.8/lib/oembed/provider.rb:132:in `raw'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/gems/ruby-oembed-0.8.8/lib/oembed/provider.rb:85:in `get'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/gems/ruby-oembed-0.8.8/lib/oembed/providers.rb:102:in `get'
/home/dldunckel/code/sandbox/oembed/sample.sites.com/_plugins/oembed.rb:41:in `render'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/gems/liquid-2.5.0/lib/liquid/block.rb:106:in `block in render_all'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/gems/liquid-2.5.0/lib/liquid/block.rb:93:in `each'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/gems/liquid-2.5.0/lib/liquid/block.rb:93:in `render_all'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/gems/liquid-2.5.0/lib/liquid/block.rb:82:in `render'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/gems/liquid-2.5.0/lib/liquid/template.rb:124:in `render'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/gems/liquid-2.5.0/lib/liquid/template.rb:132:in `render!'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/gems/jekyll-0.12.1/lib/jekyll/convertible.rb:79:in `do_layout'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/gems/jekyll-0.12.1/lib/jekyll/page.rb:100:in `render'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/gems/jekyll-0.12.1/lib/jekyll/site.rb:204:in `block in render'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/gems/jekyll-0.12.1/lib/jekyll/site.rb:203:in `each'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/gems/jekyll-0.12.1/lib/jekyll/site.rb:203:in `render'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/gems/jekyll-0.12.1/lib/jekyll/site.rb:41:in `process'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/gems/jekyll-0.12.1/bin/jekyll:264:in `<top (required)>'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/bin/jekyll:19:in `load'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/bin/jekyll:19:in `<main>'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/bin/ruby_noexec_wrapper:14:in `eval'
/home/dldunckel/.rvm/gems/ruby-2.0.0-p0@test-oembed/bin/ruby_noexec_wrapper:14:in `<main>'
Build Failed

@prayerslayer
Copy link

Same here!

/Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/ruby-oembed-0.8.8/lib/oembed/provider.rb:132:in `raw': uninitialized constant OEmbed::Provider::OpenSSL (NameError)
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/ruby-oembed-0.8.8/lib/oembed/provider.rb:85:in `get'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/ruby-oembed-0.8.8/lib/oembed/providers.rb:102:in `get'
from /Users/xnikp/Sites/blog/_plugins/oembed.rb:45:in `render'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/liquid-2.5.0/lib/liquid/block.rb:106:in `block in render_all'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/liquid-2.5.0/lib/liquid/block.rb:93:in `each'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/liquid-2.5.0/lib/liquid/block.rb:93:in `render_all'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/liquid-2.5.0/lib/liquid/block.rb:82:in `render'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/liquid-2.5.0/lib/liquid/template.rb:124:in `render'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/liquid-2.5.0/lib/liquid/template.rb:132:in `render!'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/jekyll-1.0.3/lib/jekyll/convertible.rb:77:in `render_liquid'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/jekyll-1.0.3/lib/jekyll/convertible.rb:125:in `do_layout'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/jekyll-1.0.3/lib/jekyll/post.rb:263:in `render'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/jekyll-1.0.3/lib/jekyll/site.rb:228:in `block in render'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/jekyll-1.0.3/lib/jekyll/site.rb:227:in `each'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/jekyll-1.0.3/lib/jekyll/site.rb:227:in `render'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/jekyll-1.0.3/lib/jekyll/site.rb:44:in `process'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/jekyll-1.0.3/lib/jekyll/command.rb:18:in `process_site'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/jekyll-1.0.3/lib/jekyll/commands/build.rb:23:in `build'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/jekyll-1.0.3/lib/jekyll/commands/build.rb:7:in `process'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/jekyll-1.0.3/bin/jekyll:85:in `block (2 levels) in <top (required)>'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/commander-4.1.3/lib/commander/command.rb:180:in `call'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/commander-4.1.3/lib/commander/command.rb:180:in `call'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/commander-4.1.3/lib/commander/command.rb:155:in `run'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/commander-4.1.3/lib/commander/runner.rb:402:in `run_active_command'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/commander-4.1.3/lib/commander/runner.rb:78:in `run!'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/commander-4.1.3/lib/commander/delegates.rb:7:in `run!'
from /Users/xnikp/.rvm/gems/ruby-2.0.0-p247/gems/commander-4.1.3/lib/commander/import.rb:10:in `block in <top (required)>'

@alx
Copy link

alx commented Jul 21, 2013

After a problem, I noticed that ruby-oembed gem must be installed, and not oembed (that one should be removed if you've installed it)

@snrbrnjna
Copy link

the example oembed calls above are wrong. as the plugin is a liquid tag and not a filter, you have to embed content with the call

`{% oembed http://www.youtube.com/watch?v=MQDozUfoinc %}``

@vanto: please update the examples above also with the correct gem dependency: gem install ruby-oembed

@snrbrnjna
Copy link

Add Soundcloud Provider:

@benjamintanweihao
Copy link

Those with Ruby 2.x problems, you would need to require 'openssl' first.

@vanto
Copy link
Author

vanto commented Feb 28, 2014

@snrbrnjna, @benjamintanweihao Thanks for the hints, I updated the readme accordingly.

@Kageetai
Copy link

it doens't seem to work with vimeo anymore
no error or console output or anything...

@internaut
Copy link

I created a version that also supports optional width/height dimension parameters: https://gist.github.com/internaut/11403000

@mattfullerton
Copy link

I had to add require 'net/https', as per ruby-oembed/ruby-oembed#31
(error: undefined method use_ssl='`)

@dragysin79
Copy link

Can somebody help me. How can i display youtube video in size 1000px?
Whit this code i get only 480px width:
{% oembed http://www.youtube.com/watch?v=qgqkOX43jak %}
thanks

@gemfarmer
Copy link

gemfarmer commented Feb 22, 2017

@dragysin79 I just created an updated version of this plugin that you can see here: https://gist.github.com/gemfarmer/08e39cd8695a05d4c26a71699f344cfd

It supports width, height, title

@inetbiz
Copy link

inetbiz commented Sep 11, 2021

@vanto Liquid Exception: This server doesn't have the correct libraries installed to support the 'xml' format in in the new post I made with

{% if page.oembed %}
    {% for url in page.oembed %}
        {% oembed {{url}} %}
    {% endfor %} 
{% endif %}

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