Easy Youtube Embed for Jekyll

Installation Instructions

Download the file youtube.rb from the Github repository and place it in the _plugins folder of your Jekyll installation.

Usage Instructions

In your Markdown post, simply include the following command:

{% youtube VIDEO_ID %}

And for playlists (new as of September 25, 2015):

{% youtube VIDEO_ID?list=PLAYLIST_ID %}

For example, {% youtube prFohBWIdQg %} will render as:

<div class="video">
    <figure>
        <iframe width="640" height="480" src="//www.youtube.com/embed/prFohBWIdQg" frameborder="0" allowfullscreen></iframe>
    </figure>
</div>

A playlist example, {% youtube yFTvbcNhEgc?list=RDyFTvbcNhEgc %} will render as:

<div class="video">
    <figure>
        <iframe width="640" height="480" src="//www.youtube.com/embed/yFTvbcNhEgc?list=RDyFTvbcNhEgc" frameborder="0" allowfullscreen></iframe>
    </figure>
</div>

Example

Single Video

Playlist

If you’re interested in the CSS, you can add it to your stylesheet and your videos will resize responsively based on the width of the browser’s viewport.

/* responsive videos */
.video figure { 
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video iframe, .video object, .video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}