如何在 jekyll markdown 博客中包含视频

Question

我刚刚开始使用 jekyll 写博客。我用 Markdown 写帖子。现在，我想在我的帖子中添加一个 YouTube 视频。我该怎么做？

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

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 配合使用。）

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

您是否经常在谷歌上搜索“如何在 Markdown 中嵌入视频？”

虽然不可能在 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}

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

Answer 6

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

（来源）

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>

或者

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

Answer 8

考虑购买这门名为博主mastermind的课程 https://www.market22.co/p/64c7cd75e748f6ba558c111a?id=652c38ed729559cd892ac045