Serving your blog from github pages is perfect for me, but as you you might know, you can’t have plugins beyond the ones pre-defined by github. Using a youtube plugin is therefor not possible. Luckily you can easily build a HTML include snipped to simplify your video embedding markup.

The Markup

In yout markdown page source the above video looks like this:

{% include youtube.html id=page.videoId %}

The page.videoId in here is a variable from the front matter of your page. Alternatively you can inline the videoId directly (don’t forget the quotes):

{% include youtube.html id="8FcfJadYysk" %}

The Include Snipped

The referenced include lies in _includes/youtube.html and looks like:

<div class="video-container"><iframe 
     src="https://www.youtube.com/embed/{{ include.id }}"
     frameborder="0" 
     allowfullscreen>
</iframe></div>

In rendering the include.id get replaced and the final HTML code is written to your page:

<div class="video-container"><iframe 
     src="https://www.youtube.com/embed/8FcfJadYysk"
     frameborder="0" 
     allowfullscreen>
</iframe></div>

Responsive Styles

The video-container class on the div around your video is used to add some responsive css style markup:

.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

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

I put this in a sass file on its own at _sass/_video.scss and made the top-level style.scss include it with:

@import "video";

And you’re wondering about the video? That was a long long time ago, in galaxy far away from here..