64

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

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

4

7 回答 7

81

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

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

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

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

于 2012-05-10T08:34:44.000 回答
33

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

REXML 无法解析此 XML/HTML：

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

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

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

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

于 2012-09-05T02:49:39.873 回答
16

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

语法变得如此简单：

{% youtube oHg5SJYRHA0 %}
于 2012-11-22T14:16:03.620 回答
6

就我而言，问题已通过 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>

于 2012-11-02T11:13:33.410 回答
4

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 是一个非常好的（甚至可能更好）且有效的解决方案，但此解决方案可能对用户更友好。

（来源）

于 2017-10-27T22:27:40.973 回答
3

您多久发现自己在谷歌上搜索“如何在 Markdown 中嵌入视频？ ”

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

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

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

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

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

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

内联样式：

![]({video-link})

参考风格：

![][{reference}]

[{reference}]: {video-link}

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

于 2020-04-29T05:43:56.523 回答
0

在当今：

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

或者

右键单击浏览器中的视频并复制嵌入代码。 截屏

于 2021-10-11T04:24:33.257 回答