| 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 |
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&theme=light\"> </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!
A bit more pagespeed-friendly https://github.com/tuananh/BetterTube
hi i got an error from github "youtube is not recognize as a liquid tag" , please help on this .
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.
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
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 inputYouTube_id 400 800,the editor will show me4 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.
@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
I looked to see to see what the video link in the README.md pointed to... I was not disappointed. Well played, sir.
It should be https src for the generated iframe code.
E.g.:
"<iframe width="#{@width}" height="#{@height}" src="https://www.youtube.com/embed/#{@id}?color=white&theme=light\"></iframe>"
jekyll-spaceship - 🚀 A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, mermail, emoji, youtube, vimeo, dailymotion, etc.
Github: https://github.com/jeffreytse/jekyll-spaceship
I couldn't use this directly, because Github-Pages or whatever, but having implemented my own one in the form of {% include youtube.liquid id="xyz" %} I wanted to point out that you can reference the thumbnail of the video directly, and put a button on top to play the video (add ?autoplay=1 so you don't have to click twice) so that your own page doesn't have to run a bunch of spurious javascript just to make a clickable image. Here's what I did:
https://github.com/sh1boot/sh1boot.github.io/blob/master/_includes/clickable-embed.liquid
@carlosdelfino @marcokeur
GitHub Pages utilizes Jekyll's
--safemode, so all plugins are disabled.Source: Jekyll Docs
More reading: Using Jekyll Plugins on GitHub Pages