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

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,在这个存储库中有各种各样的颜色主题的CSS样式表,你可以试验它们.(请注意,您将不得不更换.codehilite与.highlight这些与哲基尔工作.)

Answer 2

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

REXML无法解析此XML/HTML:

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

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

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

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

Answer 3

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

语法变得如此简单:

{% 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 包含），所有仅包含 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 中是一个非常好的（甚至更好）且有效的解决方案，但该解决方案可能更加用户友好。

（来源）