how to include video in jekyll markdown blog [closed]
Asked Answered
E

6

71

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?

I don't 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?

Endothelium answered 10/5, 2012 at 8:7 Comment(1)
if you have two questions like this, it's best for the Stack Overflow community if you make each an individual post. It will also help you get better answers because each one will be targeted directly to the specific question.Gualterio
T
91

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

Tello answered 10/5, 2012 at 8:34 Comment(5)
The embedded iframe works out of the box and should work with most plugins. However, I've found one (the category page generator from recursive-design.com/projects/jekyll-plugins) that has problems with it. The fix in that case is to put a space between the open and closing iframe tags. If anyone has problems with embedding, that's worth a shot.Gualterio
@AlanW.Smith Thanks Alan, you sorted a bug that had caused me an hours worth of head scratching with a single space character :)Cohberg
I kept getting malformed XML: missing tag start errors. Seemed to be coming from the allowfullscreen attribute. I tried added allowfullscreen="true" and it compiled but didn't close the iframe tag properly and swallowed the rest of the document.Bromate
@dbaupp I ended up doing: <iframe width="420" height="315" src="//www.youtube.com/embed/w0K1wwSJZoc" frameborder="0" allowfullscreen="allowfullscreen">&nbsp;</iframe> (Note that character between the iframe tags, adding this allowed the closing iframe tag to be rendered properly)Bromate
My iframe also didn't work initially and I noticed I hadn't quoted the values of the attributes. Once I added the double-quotes it worked. Just FYI.Cilium
P
35

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.

Publicity answered 5/9, 2012 at 2:49 Comment(4)
I encounter the same issue on a page with 3 videos on github pages. Removing the allowfullscreen help to display the first video but it hides everything after (other video, text, footer ...). Adding a whitespace before the closing </iframe> done the job.Electrophoresis
I ran into this problem on github pages. Making things XHTML by changing allowfullscreen to allowfullscreen="allowfullscreen" worked for me.Meridethmeridian
allowfullscreen="1" worked for me. Seems the parser just doesn't appreciate attributes with no values.Jaimeejaimes
@magdmartin: Thanks for the hint about the whitespace. This resolved my issue to embed a Prezi presentation into a Jekyll post!Battalion
S
18

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 %}
Sousa answered 22/11, 2012 at 14:16 Comment(4)
This is a great tip, although the plugin too suffers from the problems posted in the question. I've forked the plugin and applied the changes suggested in the answers to this question: gist.github.com/serra/5574343Padriac
@Padriac Is it possible to move this from a gist to a full repo? Would be quite handy then. thanksMaccaboy
I am getting an error from github ''The tag youtube in _posts/2015-08-06-my-new-blo-on-jekyll.markdown/#excerpt is not a recognized Liquid tag"Oldster
This is pretty handy, Hexo use the same logic for embedding Youtube video.Rounder
K
6

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>

Kimura answered 2/11, 2012 at 11:13 Comment(0)
E
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&amp;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)

Erivan answered 27/10, 2017 at 22:27 Comment(0)
B
0

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

Behring answered 11/10, 2021 at 4:24 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.