how to include video in jekyll markdown blog

The html code to insert a youtube video can be produced in Jekyll using a simple plugin as described in https://gist.github.com/1805814.

The syntax becomes as simple as:

{% youtube oHg5SJYRHA0 %}

I did similar thing but in my case, simple copy and paste doesn't work. The error message is below:

REXML could not parse this XML/HTML:

To avoid this error, I deleted allowfullscreen from copied source as below:

<iframe width="480" height="360" src="http://www.youtube.com/embed/WO82PoAczTc" frameborder="0"> </iframe>

It is important that Adding a whitespace before the closing </iframe>.

Then, I succeeded to embed the video into my site.

You should be able to put the HTML for embedding directly into your markdown. Under the video, there is a "Share" button, click on this, and then the "Embed" button, which should give you something that looks a little like:

<iframe width="420" height="315" src="http://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

Just copy and paste that into your post, the Markdown preprocessor won't touch it.

---

For Pygments, there is a whole pile of CSS stylesheets for various colour themes in this repository, you could experiment with them. (Note that you will have to replace .codehilite with .highlight for these to work with Jekyll.)

In my case issue has been resolved with jQuery:

jQuery

$('.x-frame.video').each(function() {
  $(this).after("<iframe class=\"video\" src=\"" + ($(this).attr('data-video')) + "\" frameborder=\"0\"></iframe>");
});

Usage

<div class="x-frame video" data-video="http://player.vimeo.com/video/52302939"> </div>

Note that whitespace is required between <div> </div>