Gadz-Geek Blog

The blog of a Gadz Geek.

Improve Responsiveness of Youtube Frames in Jekyll and Octopress Pages

I am now using octopress hosted in GitHub for my blog. Octopress is based on Jekyll which is a static site generator written in Ruby. Jekyll uses a combination of Liquid and Markdown , two markup engines that allow you to write your post almost in plain ascci without worrying about the HTML syntax.

After installing a appropriated plugin, I was able to insert youtube video frame using a Liquid sequence

 {% youtube VIDEO_ID %}

Internaly the youtube tag triggers a little Liquid script that turns the video ID into the <iframe> html element as required by the Youtube API.

<iframe width="560" height="315"  
        frameborder="0" allowfullscreen ></iframe>

and produces :

One of my first post included a lot of embedded youtube video and it was very convenient.

However, with many videos includes the page takes a very long time to load, and the browser even freezes while the <iframe> s were beeing installed. (not suprisingly many article, such as this one recommand to use iframe sparingly for this very reason)

Searching a little bit deeper, I stumbled across an article from yabtb explaining how overcome this problem, using a technique called lazy loading.

In essence, lazy loading consist of replacing the <iframe> with a static image (using the <img> tag) and a little bit of javascript to replace the <img> tag with the proper <iframe> tag at runtime when the reader clicks on the image.

I then decided to improve the youtube Liquid plugin to use this technique and publish the new plugin <[code on github :

you can see the result of here : Raspberry Pi How to use the GPIO