how to include video in jekyll markdown blog - ruby

Question

I just started blogging using jekyll. I write my posts in markdown. Now, I want to include a youtube video in my post. How can I do this?
Also, I dont really like the pygments highlighting provided by jekyll by default. Is there anyway I can change this to some other style? If yes, can you point me to some nice styles/plugins?

Answer 1

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.)

Answer 2

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.

Answer 3

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 %}

Answer 4

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>

Answer 5

One of the nicer features of WordPres is that you can just paste a Youtube URL in the content (on a new line) and WordPress transforms this into an embed code.
The following code does the same for Jekyll. Just put this code in your footer (or use a Jekyll include) and all paragraphs with JUST a Youtube URL are automagically converted to responsive Youtube embeds by Vanilla JS.
<style>
.videoWrapper {position: relative; padding-bottom: 56.333%; height: 0;}
.videoWrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
</style>
<script>
function getId(url) {
var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
var match = url.match(regExp);
if (match && match[2].length == 11) {
return match[2];
} else {
return 'error';
}
}
function yt_url2embed() {
var p = document.getElementsByTagName('p');
for(var i = 0; i < p.length; i++) {
var pattern = /^((http|https|ftp):\/\/)/;
if(pattern.test(p[i].innerHTML)) {
var myId = getId(p[i].innerHTML);
p[i].innerHTML = '<div class="videoWrapper"><iframe width="720" height="420" src="https://www.youtube.com/embed/' + myId + '?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>';
}
}
}
yt_url2embed();
</script>
Although just adding the HTML code to your Markdown is a very good (maybe even better) and valid solution, this solution might be more user-friendly.
(Source)

Answer 6

How often did you find yourself googling "How to embed a video in markdown?"
While its not possible to embed a video in markdown, the best and easiest way is to extract a frame from the video. To add videos to your markdown files easier, I think the jekyll plugin below would help you, and it will parse the video link inside the image block automatically.
jekyll-spaceship - 🚀 A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, emoji, youtube, vimeo,dailymotion, etc.
https://github.com/jeffreytse/jekyll-spaceship
For now, these video links parsing are provided:
Youtube
Vimeo
DailyMotion
...
There are two ways to embed a video in your Jekyll blog page:
Inline-style:
![]({video-link})
Reference-style:
![][{reference}]
[{reference}]: {video-link}
Then, you succeeded to embed the video into your site.

Answer 7

In nowadays:
<iframe width="840" height="473" src="https://www.youtube.com/embed/IQf-vtIC-Uc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Or
right click on the video in your browser and copy-past the embed code.