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

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

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

 Alan W. Smith10 мая 2012 г., 14:20
Если у вас есть два таких вопроса, лучше всего для сообщества Stack Overflow, если вы создадите каждый отдельный пост. Это также поможет вам получить лучшие ответы, потому что каждый из них будет направлен непосредственно на конкретный вопрос.

Ответы на вопрос(5)

простого плагина, как описано вhttps: //gist.github.com/180581.

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

{% youtube oHg5SJYRHA0 %}
 Xinyang Li06 апр. 2016 г., 12:55
Это очень удобно, Hexo использует ту же логику для встраивания видео на Youtube.
 Benny14 июл. 2014 г., 22:45
@ Marijn Можно ли переместить это из сути в полное репо? Было бы очень удобно тогда. Благодарност
 Marijn14 мая 2013 г., 09:56
Это отличный совет, хотя плагин тоже страдает от проблем, указанных в вопросе. Я раздвоил плагин и применил изменения, предложенные в ответах на этот вопрос: Gist.github.com / Серра / 5574343
 user89119306 авг. 2015 г., 19:58
Я получаю сообщение об ошибке от github '' Тег youtube в _posts / 2015-08-06-my-new-blo-on-jekyll.markdown / # отрывок не является распознанным тегом Liquid "
Решение Вопроса

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

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

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

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

 SecretDeveloper21 июл. 2013 г., 13:54
@ AlanW.Smith Спасибо, Алан, вы исправили ошибку, из-за которой я почесал голову часами одним пробелом:)
 Nicolai07 июл. 2015 г., 10:27
Хороший Рик-Ролл. :)
 speg17 мая 2014 г., 05:21
Я продолжал получатьmalformed XML: missing tag start ошибки. Похоже, что это происходит из атрибута allowfullscreen. Я попытался добавить allowfullscreen = "true", и он скомпилировался, но не закрыл тег iframe должным образом и проглотил остальную часть документа.
 jacksparrow00710 мая 2012 г., 14:25
Большое спасибо ... это сработало
 Alan W. Smith10 мая 2012 г., 15:28
Встроенный iframe работает из коробки и должен работать с большинством плагинов. Тем не менее, я нашел один (генератор страниц категории от Recursive-design.com / проекты / Джекилл-плагины) у которого есть проблемы с этим. Исправление в этом случае заключается в размещении пробела между открывающим и закрывающим тегами iframe. Если у кого-то есть проблемы с встраиванием, стоит попробовать.

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

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

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

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

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

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

 Kurt Emch15 апр. 2013 г., 00:24
allowfullscreen="1" работал на меня. Кажется, что парсер просто не оценивает атрибуты без значений.
 bwest25 февр. 2013 г., 00:24
Я столкнулся с этой проблемой на страницах GitHub. Делать вещи XHTML, меняяallowfullscreen вallowfullscreen="allowfullscreen" работал на меня.
 magdmartin02 янв. 2013 г., 15:48
Я сталкиваюсь с той же проблемой на странице с 3 видео на страницах GitHub. Удалениеallowfullscreen помогите отобразить первое видео, но оно скрывает все после (другое видео, текст, нижний колонтитул ...). Добавление пробела перед закрытием</iframe> сделал работу.
 weed01 февр. 2013 г., 02:31
Спасибо за ваше предложение!
 orschiro13 нояб. 2013 г., 08:56
@ magdmartin: Спасибо за подсказку о пробелах. Это решило мою проблему, чтобы встроить презентацию Prezi в пост Jekyll!

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>

 joonas.fi29 июл. 2015 г., 09:05
Отличное решение! :) Жаль, что это не так много смысла.

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

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

(Источни)

Ваш ответ на вопрос