comment inclure la vidéo dans jekyll markdown blog
Je viens de commencer à bloguer en utilisant jekyll. J'écris mes messages dans markdown. Maintenant, je veux inclure une vidéo youtube dans mon post. Comment puis-je faire cela?
Aussi, je n'aime pas vraiment les pygments mis en évidence par Jekyll par défaut. Y at-il de toute façon je peux changer cela à un autre style? Si oui, pouvez-vous me pointer vers de beaux styles/plugins?
5 réponses
Vous devriez être en mesure de mettre le code HTML pour l'intégration directement dans votre markdown. Sous la vidéo, il y a un bouton "Partager", cliquez dessus, puis le bouton "Intégrer", ce 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>
Il suffit de copier et coller cela dans votre message, le préprocesseur Markdown ne le touchera pas.
Pour les Pygments, il y a toute une pile de feuilles de style CSS pour différents thèmes de couleurs dans ce dépôt , vous pouvez les expérimenter. (Note que vous devrez remplacer .codehilite par .highlight pour que ceux-ci fonctionnent avec Jekyll.)
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 D'Ajouter un espace avant la fermeture </iframe>.
Ensuite, j'ai réussi à intégrer la vidéo dans mon site.
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 %}
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>");
});
L'Utilisation de
<div class="x-frame video" data-video="http://player.vimeo.com/video/52302939"> </div>
Notez que les espaces sont requis entre <div> </div>
L'une des plus belles caractéristiques 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 la même chose pour Jekyll. Il suffit de mettre ce code dans votre pied de page (ou d'utiliser un Jekyll include) et tous les paragraphes avec juste une URL Youtube sont automatiquement convertis en intégrations Youtube responsive 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&showinfo=0" frameborder="0" allowfullscreen></iframe></div>';
}
}
}
yt_url2embed();
</script>
Bien que l'ajout du code HTML à votre démarque soit un très bon et valide solution, Cette solution pourrait être encore plus conviviale.
(Source)