ruby - reproducir - cómo incluir video en el blog de reducción de jekyll

como subir un video de youtube a un blogger

Question

Acabo de empezar a bloguear usando jekyll. Escribo mis publicaciones en el descuento. Ahora, quiero incluir un video de youtube en mi publicación. ¿Cómo puedo hacer esto?

Además, realmente no me gusta el resaltado de los pygments proporcionado por jekyll por defecto. ¿De todos modos puedo cambiar esto a algún otro estilo? Si es así, ¿puedes indicarme algunos estilos / complementos agradables?

Answer 1

Debería poder poner el HTML para incrustación directamente en su rebaja. Debajo del video, hay un botón "Compartir", haga clic en esto y luego en el botón "Insertar", que debería darle algo que se parece un poco a:

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

Solo copie y pegue eso en su publicación, el preprocesador Markdown no lo tocará.

Para Pygments, hay un montón de hojas de estilo CSS para varios temas de color en este repositorio , puedes experimentar con ellos. (Tenga en cuenta que deberá reemplazar .codehilite con .highlight para que estos funcionen con Jekyll).

Answer 2

El código html para insertar un video de youtube se puede producir en Jekyll usando un plugin simple como se describe en https://gist.github.com/1805814 .

La sintaxis se vuelve tan simple como:

{% youtube oHg5SJYRHA0 %}

Answer 3

En mi caso, el problema se resolvió con jQuery:

jQuery

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

Uso

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

Tenga en cuenta que se requiere espacio en blanco entre <div> </div>

Answer 4

Hice algo similar, pero en mi caso, copiar y pegar simplemente no funciona. El mensaje de error está a continuación:

REXML no pudo analizar este XML / HTML:

Para evitar este error, allowfullscreen de la fuente copiada de la siguiente manera:

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

Es importante que se agregue un espacio en blanco antes del </iframe> cierre.

Luego, logré incrustar el video en mi sitio.

Answer 5

Una de las mejores características de WordPres es que puedes pegar una URL de Youtube en el contenido (en una nueva línea) y WordPress lo transforma en un código de inserción.

El siguiente código hace lo mismo para Jekyll. Simplemente coloque este código en su pie de página (o utilice una inclusión de Jekyll) y todos los párrafos con SOLO una URL de Youtube se convierten automágicamente a las incrustaciones de Youtube receptivas por 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>

Aunque solo agregar el código HTML a su Markdown es una solución muy buena y válida, esta solución podría ser aún más fácil de usar.

( Source )