如何将在杰基尔降价博客视频(how to include video in jekyll markd

我刚开始使用博客杰基尔。我写我的帖子在降价。现在，我想包括在我的岗位YouTube视频。我怎样才能做到这一点？

另外，我真的不喜欢通过高亮杰基尔提供默认的Pygments来做。有反正我可以改变这一些其他的风格？如果是的话，你可以点我一些很好的款式/插件吗？

Answer 1:

您应该能够把HTML直接嵌入到你的降价。在视频中，有一个“共享”按钮，点击这个，然后将“嵌入”按钮，这应该给你的东西，看起来有点像：

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

只需复制并粘贴到您的文章，降价预处理不会动它。

对于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:

的HTML代码中插入YouTube视频可以在化身使用如所描述的简单的插件来制造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网址（在新行）和WordPress转变成一个嵌入代码这一点。

下面的代码确实为哲基尔相同。只要把这个代码在您的页脚（或使用杰基尔包括），并只用YouTube网址的所有段落被自动转换到响应的Youtube嵌入由香草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>

虽然只是添加HTML代码到你的降价是一个很好的（甚至更好）和有效的解决方案，这种解决方案可能会更方便用户使用。

（来源）

文章来源: how to include video in jekyll markdown blog