/jekyll-html5-youtube

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

Primary LanguageRubyMIT LicenseMIT

Jekyll HTML5 Youtube

Gem Version

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

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.