Вопрос по highlight, ruby – как включить видео в блог уценки Jekyll

46

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

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

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

Ваш Ответ

5   ответов
59

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

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

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

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

Большое спасибо ... это сработало jacksparrow007
Встроенный iframe работает из коробки и должен работать с большинством плагинов. Тем не менее, я нашел один (генератор страниц категории от Recursive-design.com / проекты / Джекилл-плагины) у которого есть проблемы с этим. Исправление в этом случае заключается в размещении пробела между открывающим и закрывающим тегами iframe. Если у кого-то есть проблемы с встраиванием, стоит попробовать. Alan W. Smith
Хороший Рик-Ролл. :) Nicolai
@ AlanW.Smith Спасибо, Алан, вы исправили ошибку, из-за которой я почесал голову часами одним пробелом:) SecretDeveloper
Я продолжал получатьmalformed XML: missing tag start ошибки. Похоже, что это происходит из атрибута allowfullscreen. Я попытался добавить allowfullscreen = "true", и он скомпилировался, но не закрыл тег iframe должным образом и проглотил остальную часть документа. speg
30

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

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

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

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

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

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

Я столкнулся с этой проблемой на страницах GitHub. Делать вещи XHTML, меняяallowfullscreen вallowfullscreen="allowfullscreen" работал на меня. bwest
Я сталкиваюсь с той же проблемой на странице с 3 видео на страницах GitHub. Удалениеallowfullscreen помогите отобразить первое видео, но оно скрывает все после (другое видео, текст, нижний колонтитул ...). Добавление пробела перед закрытием</iframe> сделал работу. magdmartin
allowfullscreen="1" работал на меня. Кажется, что парсер просто не оценивает атрибуты без значений. Kurt Emch
Спасибо за ваше предложение! weed
@ magdmartin: Спасибо за подсказку о пробелах. Это решило мою проблему, чтобы встроить презентацию Prezi в пост Jekyll! orschiro
14

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

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

{% youtube oHg5SJYRHA0 %}
Это очень удобно, Hexo использует ту же логику для встраивания видео на Youtube. Xinyang Li
@ Marijn Можно ли переместить это из сути в полное репо? Было бы очень удобно тогда. Благодарност Benny
Это отличный совет, хотя плагин тоже страдает от проблем, указанных в вопросе. Я раздвоил плагин и применил изменения, предложенные в ответах на этот вопрос: Gist.github.com / Серра / 5574343 Marijn
Я получаю сообщение об ошибке от github '' Тег youtube в _posts / 2015-08-06-my-new-blo-on-jekyll.markdown / # отрывок не является распознанным тегом Liquid " user891193
5

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.fi
2

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

(Источни)

Похожие вопросы