ruby 如何在 jekyll markdown 博客中包含视频

how to include video in jekyll markdown blog

提问by Hymansparrow007

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?

我刚开始用 jekyll 写博客。我用 Markdown 写我的帖子。现在，我想在我的帖子中包含一个 youtube 视频。我怎样才能做到这一点？

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?

另外，我真的不喜欢 jekyll 默认提供的 pygments 突出显示。无论如何我可以将其更改为其他样式吗？如果是的话，你能指点我一些不错的样式/插件吗？

回答by huon

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:

您应该能够将要嵌入的 HTML 直接放入您的 Markdown 中。在视频下方，有一个“分享”按钮，点击它，然后点击“嵌入”按钮，它应该会给你一些看起来像的东西：

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

只需将其复制并粘贴到您的帖子中，Markdown 预处理器就不会触及它。

---

---

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 .codehilitewith .highlightfor these to work with Jekyll.)

对于 Pygments，此存储库中有一大堆各种颜色主题的 CSS 样式表，您可以尝试使用它们。（请注意，您必须替换.codehilitewith.highlight才能与 Jekyll 一起使用。）

回答by Feel Physics

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:

REXML 无法解析此 XML/HTML：

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

为避免此错误，我allowfullscreen从复制的源中删除如下：

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

在结束之前添加一个空格很重要</iframe>。

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

然后，我成功地将视频嵌入到我的网站中。

回答by Etienne

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.

可以使用https://gist.github.com/1805814 中描述的简单插件在 Jekyll 中生成用于插入 youtube 视频的 html 代码。

The syntax becomes as simple as:

语法变得如此简单：

{% youtube oHg5SJYRHA0 %}

回答by Helga Konly

In my case issue has been resolved with jQuery:

就我而言，问题已通过 jQuery 解决：

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>

请注意，之间需要空格 <div> </div>

回答by JoostS

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.

WordPres 的一个更好的功能是，您只需将 Youtube URL 粘贴到内容中（在新行上），WordPress 会将其转换为嵌入代码。

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.

以下代码对 Jekyll 执行相同的操作。只需将此代码放在您的页脚中（或使用 Jekyll 包含），所有带有 Youtube URL 的段落都会自动转换为 Vanilla JS 的响应式 Youtube 嵌入。

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

尽管将 HTML 代码添加到您的 Markdown 中是一个非常好的（甚至更好）且有效的解决方案，但该解决方案可能对用户更友好。

(Source)

（来源）

回答by J.T.

How often did you find yourself googling "How to embed a video in markdown?"

你多久发现自己在谷歌上搜索“如何在 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.

虽然不可能在 Markdown 中嵌入视频，但最好和最简单的方法是从视频中提取一帧。为了更轻松地将视频添加到您的 Markdown 文件中，我认为下面的 jekyll 插件会对您有所帮助，它会自动解析图像块内的视频链接。

jekyll-spaceship - A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, emoji, youtube, vimeo,dailymotion, etc.

jekyll-spaceship - 一个 Jekyll 插件，为 table、mathjax、plantuml、emoji、youtube、vimeo、dailymotion 等提供强大的支持。

https://github.com/jeffreytse/jekyll-spaceship

https://github.com/jeffreytse/jekyll-spaceship

For now, these video links parsing are provided:

目前，提供了这些视频链接解析：

• Youtube
• Vimeo
• DailyMotion
• ...

• YouTube
• 维密欧
• 每日运动
• ...

There are two ways to embed a video in your Jekyll blog page:

有两种方法可以在 Jekyll 博客页面中嵌入视频：

Inline-style:

内联样式：

![]({video-link})

Reference-style:

参考样式：

![][{reference}]

[{reference}]: {video-link}

Then, you succeeded to embed the video into your site.

然后，您成功地将视频嵌入到您的网站中。