Как включить видео в блог jekyll markdown

Я только начал вести блог, используя jekyll. Я пишу свои сообщения в уценке. Теперь, я хочу включить видео youtube в свой пост. Как я могу это сделать?

Кроме того, мне действительно не нравится подсветка pygments, предоставленная jekyll по умолчанию. В любом случае, я могу изменить это на другой стиль? Если да, можете ли вы указать мне некоторые красивые стили/плагины?

Ответы

Ответ 1

Вы должны быть в состоянии поместить HTML для встраивания прямо в вашу уценку. Под видео есть кнопка "Поделиться", нажмите на нее, а затем кнопку "Вставить", которая должна дать вам нечто похожее на:

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

Просто скопируйте и вставьте это в свой пост, препроцессор Markdown не будет его трогать.

Для Pygments в этом хранилище есть целая куча таблиц стилей CSS для различных цветовых тем, с которыми вы можете поэкспериментировать. (Обратите внимание, что вам придется заменить .codehilite на .highlight чтобы они работали с Jekyll.)

Ответ 2

Я сделал подобное, но в моем случае простое копирование и вставка не работает. Сообщение об ошибке ниже:

REXML не смог разобрать этот XML/HTML:

Чтобы избежать этой ошибки, я удалил allowfullscreen из скопированного источника, как allowfullscreen ниже:

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

Важно добавить пробел перед закрытием </iframe>.

Затем мне удалось вставить видео на мой сайт.

Ответ 3

Код html для вставки видео youtube можно создать в Jekyll с помощью простого плагина как описано в https://gist.github.com/1805814.

Синтаксис становится таким простым, как:

{% youtube oHg5SJYRHA0 %}

Ответ 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>

требуется пробел,

Ответ 5

Одна из приятных особенностей WordPres заключается в том, что вы можете просто вставить URL-адрес Youtube в контент (на новой строке), а WordPress преобразует его в код для встраивания.

Следующий код делает то же самое для Jekyll. Просто вставьте этот код в нижний колонтитул (или используйте Jekyll include), и все абзацы с JUST URL-адресом YouTube автоматически преобразуются в адаптивные встраивания Youtube с помощью Vanilla 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-кода в Markdown - это очень хорошее (может быть, даже лучше) и правильное решение, это решение может быть более удобным для пользователя.

(Источник)