Repository files navigation

Jekyll plugin to generate clean html5 snippets for embedding YouTube videos, without iframes.

The canonical source of Jekyll HTML5 Youtube is hosted onhttps://git.knowbl.co/dev/jekyll-html5-youtube/.

• Installation
• Usage
• Result
• Examples
• Author

gem install jekyll-html5-youtube

and put this at the bottom of thegems: 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-containerobject{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

<divclass="embed-container"><objectdata="https://www.youtube.com/embed/abcd5678"></object></div>

You can write your own snippet by creating a file in_includes calledyoutube.html. The YouTube ID is displayed using{{ youtube_id }}.

Exampleyoutube.html:

<objectdata="https://www.youtube.com/embed/{{ youtube_id }}"style="width:100%;height:100vh"></object>

For troubleshooting, or just a quick start usingjekyll-html5-youtube, you can look inside theexamples folder.

examples/default is using the default output.

examples/custom is a custom output for the partial, using_includes/youtube.html.

• Add examples.
• Support for timecode feature.
• Support for playlists.
• Support for channel information display.
• Bug hunt.

Any direct feedback can be given here:

https://knowbl.co/contact/

Or raise an issue

https://github.com/knowbl/jekyll-html5-youtube/issues

Written byLorenzo Sapora forKnowbl.

• Blog
• Github
• Gitlab mirror
• Twitter