如何在Jekyll的Markdown博客中嵌入视频

Question

我刚开始使用jekyll写博客。我用markdown来写我的文章。现在我想在我的文章中插入一个YouTube视频。我应该怎么做呢？

我不太喜欢jekyll默认提供的pygments代码高亮。有没有办法可以改成其他样式？如果有的话，你能给我推荐一些好看的样式/插件吗？

- jacksparrow007

---

如果你有两个类似的问题，最好分别发两篇问答帖子，在 Stack Overflow 社区中这样做更有利。这样做也会帮助你获得更好的答案，因为每个问题都可以针对性地得到解答。 - Alan W. Smith

Answer 1

你应该能够直接将HTML嵌入到你的Markdown中。在视频下方，有一个“分享”按钮，点击这个按钮，然后点击“嵌入”按钮，应该会给你一些类似于下面的东西：

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

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

---

对于Pygments，这个代码库中有一堆用于各种颜色主题的CSS样式表，您可以尝试使用它们。 （请注意，您必须将 .codehilite 替换为 .highlight 才能使其与Jekyll配合使用。）

- huon

---

内嵌的 iframe 可以直接使用，应该与大多数插件兼容。但是，我发现有一个插件（来自 http://recursive-design.com/projects/jekyll-plugins/ 的分类页面生成器）与它不兼容。在这种情况下，解决方法是在开放和关闭的 iframe 标签之间加入一个空格。如果有人在嵌入时遇到问题，可以尝试这个方法。 - Alan W. Smith

@AlanW.Smith 谢谢你，Alan。你用一个空格字符解决了一个让我苦思冥想了一个小时的错误 :) - SecretDeveloper

我一直收到“格式错误的XML：缺少标签开头”的错误消息。似乎是来自allowfullscreen属性。我尝试添加了allowfullscreen="true"，它编译了，但没有正确关闭iframe标签并吞下了文档的其余部分。 - speg

@dbaupp 我最终做了这个：<iframe width="420" height="315" src="//www.youtube.com/embed/w0K1wwSJZoc" frameborder="0" allowfullscreen="allowfullscreen">&nbsp;</iframe>（请注意，标签之间的字符，添加它可以使闭合的 iframe 标签正确呈现） - speg

我的 iframe 最初也没有工作，我注意到我没有引用属性的值。一旦我添加了双引号，它就可以工作了。只是提供信息。 - lionello

Answer 2

我做了类似的事情，但在我的情况下，简单的复制粘贴不起作用。错误消息如下：

REXML无法解析此XML / HTML：

为避免出现此错误，我从复制的源代码中删除了allowfullscreen，如下所示：

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

在关闭</iframe>标签前添加一个空格非常重要。

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

- Feel Physics

---

我在一个包含3个视频的Github页面上遇到了相同的问题。移除allowfullscreen属性可以显示第一个视频，但它会隐藏之后的一切内容（其他视频、文本、页脚等）。在结束的</iframe>标签前添加一个空格就解决了问题。 - magdmartin

我在 Github Pages 上遇到了这个问题。将 allowfullscreen 改为 allowfullscreen="allowfullscreen" 可以解决它。 - bwest

allowfullscreen="1" 对我有用。似乎解析器不喜欢没有值的属性。 - Kurt Emch

@magdmartin：感谢您提供有关空格的提示。这解决了我将Prezi演示文稿嵌入Jekyll文章的问题！ - orschiro

Answer 3

使用一个简单的插件，可以在Jekyll中生成插入YouTube视频的html代码，具体方法如https://gist.github.com/1805814所述。

语法变得非常简单：

{% youtube oHg5SJYRHA0 %}

- Etienne

---

这是一个很好的提示，尽管插件也存在问题，就像问题中所述。我已经分叉了插件，并应用了在此问题的答案中建议的更改：https://gist.github.com/serra/5574343 - Marijn

@Marijn，能否将这个从gist移动到完整的repo中？那样会非常方便。谢谢。 - user894932

我从Github收到一个错误信息：“_posts/2015-08-06-my-new-blo-on-jekyll.markdown/#excerpt中的youtube标签不是一个已识别的Liquid标签。” - user891193

这非常方便，Hexo使用相同的逻辑来嵌入Youtube视频。 - XY Li

Answer 4

在我的情况下，问题已经通过jQuery解决了：

jQuery

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

使用方法

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

请注意，在<div> </div>之间需要留有空格。

- Helga Konly

Answer 5

WordPress的一个很好的特性是，你可以直接在内容中粘贴Youtube URL（放在新行上），WordPress会将其转换为嵌入代码。

以下代码可以实现Jekyll的相同功能。只需将此代码放在页脚中（或使用Jekyll include），所有仅包含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>

尽管在Markdown中添加HTML代码是一个非常好（甚至可能更好）和有效的解决方案，但这个解决方案可能更加用户友好。 (来源)

- Mr. Hugo

Answer 6

你是否经常搜索“如何在Markdown中嵌入视频？”

虽然无法在Markdown中直接嵌入视频，但最好也是最简单的方法是从视频中提取一个框架。为了更轻松地向Markdown文件添加视频，我认为下面的Jekyll插件会对您有所帮助，并且它会自动解析图像块内的视频链接。

jekyll-spaceship - 一个Jekyll插件，为表格、MathJax、PlantUML、emoji、YouTube、Vimeo、DailyMotion等提供强大的支持。

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

目前提供了以下视频链接解析功能：

• Youtube
• Vimeo
• DailyMotion
• ...

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

内联样式：

![]({video-link})

参考样式:

![][{reference}]

[{reference}]: {video-link}

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

- jeffreytse

---

请仔细检查您的帖子，并确保在所有帖子中都披露您的关联关系。这里有一个列表，可以帮助您开始。 - undefined

Answer 7

现今：

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

或者

在浏览器中右键单击视频，复制嵌入代码。

- Maxim Firsoff