Jekyll HTML5 Youtube

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

Canonical source

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

Table of contents

• Installation
• Usage
• Result
• Examples
• Author

Installation

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%}

Usage

 {% 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" %}

Result

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>

Examples

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.

TODO

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

Feedback/Contributing

Any direct feedback can be given here:

https://knowbl.co/contact/

Or raise an issue

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

AUTHOR

Written by Lorenzo Sapora for Knowbl.

• Blog
• Github
• Gitlab mirror
• Twitter