Jekyll plugin to generate html5 snippets for embedding YouTube videos, without iframes.
MIT License
Jekyll plugin to generate clean html5 snippets for embedding YouTube videos, without iframes.
The canonical source of Jekyll HTML5 Youtube is hosted on https://git.knowbl.co/dev/jekyll-html5-youtube/.
gem install jekyll-html5-youtube
and put this at the bottom of the gems:
section, in your _config.yml
gems:
- jekyll-html5-youtube
add this to your CSS file
.embed-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%}
.embed-container object{position:absolute;top:0;left:0;width:100%;height:100%}
{% youtube "https://www.youtube.com/watch?v=abcd5678" %}
You can also use
# Playlists
{% youtube "https://www.youtube.com/embed/abcd5678?list=abcd5678" %}
# Share/embeds
{% youtube "https://www.youtube.com/embed/abcd5678" %}
# Short URLs
{% youtube "https://youtu.be/abcd5678" %}
By default the plugin will output
<div class="embed-container">
<object data="https://www.youtube.com/embed/abcd5678"></object>
</div>
You can write your own snippet by creating a file in _includes
called youtube.html
. The YouTube ID is displayed using {{ youtube_id }}
.
Example youtube.html
:
<object data="https://www.youtube.com/embed/{{ youtube_id }}" style="width:100%;height:100vh"></object>
For troubleshooting, or just a quick start using jekyll-html5-youtube
, you can look inside the examples
folder.
examples/default
is using the default output.
examples/custom
is a custom output for the partial, using _includes/youtube.html
.
Any direct feedback can be given here:
Or raise an issue
https://github.com/knowbl/jekyll-html5-youtube/issues
Written by Lorenzo Sapora for Knowbl.