All Blog Posts

Jekyll Embedded Video - timelapses

In moving to Jekyll I really liked the idea of managing/writing all my content using just markdown. While it is valid to include HTML in your markdown, I really like the idea of abstracting the video reference, as we do images e.g.:

![image alt](/directory/file.jpg)

As it appears that markdown doesn't directly support video embedding in a similar manner, and as I'm hosting this site on github-pages I'm unable to use any jekyll plugins to handle the video embed. From a little research, one of the most popular suggested markdown approaches is to effectively place an image in the page (ideally of something providing a visual cue that the image represents a video), and for it to be linked to the external source containing a playable video. For example:

[![IMAGE ALT TEXT](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)]
(http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE "Video Title")

In this case, the pseudo code is referencing an image which was itself auto generated by YouTube from the video - but you could of course use any image.

For example (using a timelapse I shot in Cologne in October): Cologne Sunrise

Here, I grabbed a screenshot directly from Vimeo, so it should feel very familiar to site visitors. However, I think the action of it then navigating to a different page, might be a little unexpected.

For one-off videos, I'm going to try using this approach, however for collections, as I am a Vimeo Pro user, I can use them for managing my collections, and as an additional bonus they provide a 'Montage' widget for easy embedding:

Vimeo Montage widget

Which is what I'm using my 'timelapses' page:

Timelapses page