web-dev-qa-db-ja.com

jekyllマークダウンブログに動画を含める方法

私はjekyllを使ってブログを始めました。私は自分の投稿をマークダウンで書きます。次に、投稿にyoutubeビデオを含めたいと思います。これどうやってするの？

また、デフォルトでjekyllが提供するpygmentsハイライトはあまり好きではありません。とにかくこれを他のスタイルに変更できますか？はいの場合、いくつかの素敵なスタイル/プラグインを教えてもらえますか？

rubyvideomarkdownhighlightjekyll
47
jacksparrow007

マークダウンに直接埋め込むHTMLを配置できるはずです。ビデオの下に「共有」ボタンがあり、これをクリックしてから「埋め込み」ボタンをクリックすると、次のようになります。

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

それをコピーして投稿に貼り付けるだけで、Markdownプリプロセッサはそれに触れません。

Pygmentsの場合、さまざまなカラーテーマ用のCSSスタイルシートが山積みになっており、 このリポジトリ で試すことができます。 （注：.codehilite with .highlightこれらがJekyllと連携するために。）

63
huon

私は同様のことをしましたが、私の場合、単純なコピーと貼り付けは機能しません。エラーメッセージは次のとおりです。

REXMLはこのXML/HTMLを解析できませんでした：

このエラーを回避するために、以下のようにコピーしたソースからallowfullscreenを削除しました。

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

_</iframe>を閉じる前に空白を追加することが重要です。

その後、ビデオを自分のサイトに埋め込むことに成功しました。

30
Feel Physics

https://Gist.github.com/1805814 で説明されているように、youtubeビデオを挿入するhtmlコードは、シンプルなプラグインを使用してJekyllで生成できます。

構文は次のように簡単になります。

{% youtube oHg5SJYRHA0 %}
14
Etienne

私の場合、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
Helga Konly

WordPresの優れた機能の1つは、Youtube URLをコンテンツに（新しい行に）貼り付けるだけで、WordPressを埋め込みコードに変換することです。

次のコードは、Jekyllに対して同じことを行います。このコードをフッターに入れる（またはJekyllインクルードを使用する）だけで、Just a 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に追加するだけで非常に優れた（おそらくさらに優れた）有効なソリューションになりますが、このソリューションの方がユーザーフレンドリーです。

（ Source ）

2
JoostS