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"  
        src="http://www.youtube.com/embed/q_NvDTZIaS4" 
        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 : https://github.com/erossignon/jekyll-youtube-lazyloading

you can see the result of here :

Credits

• andmag
• portwaypoint
• yatb
• optikfluffel
• stackoverflow
• http://net.tutsplus.com/tutorials/other/building-static-sites-with-jekyll/
• http://five.squarespace.com/display/ShowHelp?section=Markdown