web-dev-qa-db-fra.com

comment inclure une vidéo dans le blog de démarquage jekyll

Je viens de commencer à bloguer avec jekyll. J'écris mes articles en démarque. Maintenant, je veux inclure une vidéo youtube dans mon message. Comment puis-je faire ceci?

De plus, je n'aime pas vraiment la mise en évidence des pygments fournie par jekyll par défaut. Existe-t-il de toute façon que je peux changer cela en un autre style? Si oui, pouvez-vous m'indiquer quelques beaux styles/plugins?

rubyvideomarkdownhighlightjekyll
47
jacksparrow007

Vous devriez pouvoir mettre le code HTML à intégrer directement dans votre démarque. Sous la vidéo, il y a un bouton "Partager", cliquez dessus, puis le bouton "Intégrer", qui devrait vous donner quelque chose qui ressemble un peu à:

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

Copiez et collez simplement cela dans votre message, le préprocesseur Markdown ne le touchera pas.

Pour Pygments, il y a toute une pile de feuilles de style CSS pour divers thèmes de couleurs dans ce référentiel , vous pouvez les expérimenter. (Notez que vous devrez remplacer .codehilite avec .highlight pour que ceux-ci fonctionnent avec Jekyll.)

63
huon

J'ai fait la même chose mais dans mon cas, le simple copier-coller ne fonctionne pas. Le message d'erreur est ci-dessous:

REXML n'a pas pu analyser ce XML/HTML:

Pour éviter cette erreur, j'ai supprimé allowfullscreen de la source copiée comme ci-dessous:

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

Il est important que l'ajout d'un espace avant la fermeture </iframe>.

Ensuite, j'ai réussi à intégrer la vidéo dans mon site.

30
Feel Physics

Le code html pour insérer une vidéo youtube peut être produit dans Jekyll en utilisant un simple plugin comme décrit dans https://Gist.github.com/1805814 .

La syntaxe devient aussi simple que:

{% youtube oHg5SJYRHA0 %}
14
Etienne

Dans mon cas, le problème a été résolu avec jQuery:

jQuery

$('.x-frame.video').each(function() {
  $(this).after("<iframe class=\"video\" src=\"" + ($(this).attr('data-video')) + "\" frameborder=\"0\"></iframe>");
});

tilisation

<div class="x-frame video" data-video="http://player.vimeo.com/video/52302939"> </div>

Notez que des espaces sont requis entre <div> </div>

5
Helga Konly

L'une des fonctionnalités les plus intéressantes de WordPres est que vous pouvez simplement coller une URL Youtube dans le contenu (sur une nouvelle ligne) et WordPress transforme cela en un code intégré.

Le code suivant fait de même pour Jekyll. Il suffit de mettre ce code dans votre pied de page (ou d'utiliser un Jekyll inclus) et tous les paragraphes avec JUSTE une URL Youtube sont automatiquement convertis en intégrations Youtube réactives par 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>

Bien que l'ajout du code HTML à votre Markdown soit une très bonne (peut-être même meilleure) et une solution valide, cette solution pourrait être plus conviviale.

( Source )

2
JoostS