как включить видео в блог уценки jekyll

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

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

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

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

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

REXML не смог проанализировать этот XML/HTML:

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

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

Важно, чтобы Добавление пробела перед закрывающим </iframe>.

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

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

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

{% youtube oHg5SJYRHA0 %}

В моем случае проблема была решена с помощью 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> требуется пробел.

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

Следующий код делает то же самое для Jekyll. Просто поместите этот код в свой нижний колонтитул (или используйте включение Jekyll), и все абзацы с ТОЛЬКО 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 — очень хорошее (может быть, даже лучшее) и правильное решение, это решение может быть более удобным для пользователя.

(Источник)

Как часто вы гуглили «Как встроить видео в уценку?»

Хотя встроить видео в уценку невозможно, лучший и самый простой способ — извлечь кадр из видео. Чтобы упростить добавление видео в ваши файлы уценки, я думаю, вам поможет приведенный ниже плагин jekyll, который автоматически анализирует ссылку на видео внутри блока изображения.

jekyll-spaceship — ???? Плагин Jekyll, обеспечивающий мощную поддержку таблиц, mathjax, plantuml, emoji, youtube, vimeo, dailymotion и т. д.

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

На данный момент предоставляется парсинг ссылок на видео:

• YouTube
• видео
• DailyMotion
• ...

Есть два способа встроить видео на страницу блога Jekyll:

Встроенный стиль:

![]({video-link})

Справочный стиль:

![][{reference}]

[{reference}]: {video-link}

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

????????????