Cómo insertar vídeos con Markdown

En este tutorial aprenderás a insertar vídeos usando Markdown.

Markdown no soporta la inserción de vídeos. Para un redactor cuya intención sea publicar en papel, esto no supondrá un problema, pero sí lo es para aquellos redactores que crean publicaciones online.

Podrás insertar vídeos usando algunos editores que incorporen dicha funcionalidad, aunque esté fuera de la especificación Markdown. Para el resto de editores todavía tienes la posibilidad de insertar vídeos usando dos métodos diferentes en función de si soportan HTML o no.

Inserta vídeos usando HTML

Si el editor Markdown que usas no dispone de una funcionalidad para insertar vídeos pero soporta HTML, seguramente puedas copiar y pegar el código HTML del vídeo y pegarlo en tu editor.

Si por ejemplo quieres insertar un vídeo de YouTube, basta con que uses el botón de compartir y selecciones la opción insertar. Luego copia el código HTML que se muestre y pégalo en tu editor para insertar el vídeo.

Por ejemplo, este es el código de un vídeo de YouTube que voy a insertar:

<iframe width="560" height="315" src="https://www.youtube.com/embed/rgAtmnixO0Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Este será el resultado cuando se renderize el documento en un editor que soporte HTML:

Si quieres insertar un vídeo que no esté en YouTube, tendrás que usar el código de inserción del servicio que uses, como por ejemplo Vimeo.

Inserta vídeos usando Markdown

Si tu editor Markdown no soporta el uso de HTML, entonces no será posible insertar vídeos. Sin embargo puedes simular un pequeño truco para enlazarlos. El truco consiste en enlazar el vídeo con la imagen de portada del vídeo, dando la sensación de estar insertado. De este modo el usuario será redirigido al reproductor externo al hacer clic en la imagen.

Por ejemplo, la estructura de los enlaces a los vídeos de YouTube es la siguiente:

https://www.youtube.com/watch?v=VIDEO_ID

La última parte del enlace es el identificador del vídeo, que hemos representado como VIDEO_ID. Un ejemplo podría ser el vídeo https://www.youtube.com/watch?v=rgAtmnixO0Y, cuyo identificador es rgAtmnixO0Y.

Para enlazar un vídeo enlazando una imagen mediante Markdown, tendrás que usar esta estructura, de modo que muestres la portada del vídeo:

[![Campo Alt](https://img.youtube.com/vi/VIDEO_ID/0.jpg)](https://www.youtube.com/watch?v=VIDEO_ID)

En el siguiente ejemplo vamos a enlazar el vídeo cuyo identificador es rgAtmnixO0Y. Para ello usamos el siguiente enlace:

[![Mi perro comiendo un Sunbite](https://img.youtube.com/vi/rgAtmnixO0Y/0.jpg)](https://www.youtube.com/watch?v=rgAtmnixO0Y)

Cuando se renderice el código Markdown del enlace, deberías ver el enlace tal que así:

Campo Alt

Espero que este consejo te haya resultado útil. Esto ha sido todo.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado este tutorial. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirlo en Twitter.

para estar al día con mi contenido. 😊