Question

我刚开始使用jekyll写博客。我在markdown写我的帖子。现在，我想在我的帖子中添加YouTube视频。我怎么能这样做？

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

Answer 1

您应该可以将用于嵌入的HTML直接放入降价处。在视频下方，有一个“分享”按钮，单击此按钮，然后点击“嵌入”按钮，它应该会给你一些看起来有点像的东西：

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

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

对于Pygments，在this repository中有各种各样的颜色主题的CSS样式表，你可以试验它们。（请注意，您必须将.codehilite替换为.highlight才能与Jekyll合作。）

Answer 2

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

REXML无法解析此XML / HTML：

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

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

在结束</iframe>之前添加空格非常重要。

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

Answer 3

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

语法变得如此简单：

{% youtube oHg5SJYRHA0 %}

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>

之间需要空格

Answer 5

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

以下代码对Jekyll也是如此。只需将此代码放入页脚（或使用Jekyll包含），所有带有JUST 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>

虽然只是将HTML代码添加到Markdown是一个非常好（甚至可能更好）且有效的解决方案，但此解决方案可能更加用户友好。

（Source）

Answer 6

您多久搜索一次“ 如何在降价中嵌入视频？”

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

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

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

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

Youtube
Vimeo
DailyMotion
...

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

内联样式：

RelativeLayout

引用样式：

![]({video-link})

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

???

如何在jekyll降价博客中加入视频

6 个答案: