Catégories
Non classé

Comment insérer une video Youtube dans un document Markdown?

Si vous utilisez Markdown pour de la publication web ou des présentations, il est fréquent d’avoir besoin d’ajouter une video Youtube ou Vimeo.

Markdown ne fournit pas par défaut de moyen de le faire mais nous allons voir qu’il existe plusieurs méthodes pour arriver à nos fins.

Le lien, le plus simple mais qui ne répond pas directement au problème

Le plus simple est d’ajouter un lien vers la video de la façon suivante [Video](https://www.youtube.com/watch?v=g7DpYWR8vqA)

Ce qui nous donnera le résultat suivant: Video

Si la solution est simple, elle comporte cependant quelques inconvénients:

  • Il n’y a pas de prévisualisation de la video et le lien n’attire donc pas l’oeil.
  • Le lien remplace soit la page actuelle soit emmène le visiteur sur un autre site, YouTube en l’occurence.

L’iFrame pas possible partout et lourde

L’iFrame permet d’intégrer à votre page le site YouTube à la page correspondant à votre video.

Pour se faire, on se rend sur la page Youtube de la video puis:

  • Clic droit sur la video
  • Copier le code embarqué
  • On termine par coller le code dans votre éditeur Markdown favori

Le code copié est le suivant (à l’ID de la video près):

<iframe width="1280" height="720" src="https://www.youtube.com/embed/g7DpYWR8vqA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

On obtient alors:

Le résultat est joli, on voit la video. Super! Le problème est résolu alors? Oui et non, à chaque video, une iFrame de YouTube, c’est plusieurs MO de données. Autant sur un navigateur de bureau on ne s’en rend pas trop compte autant il vaut mieux éviter sur mobile. D’une manière générale limiter les données chargées est également une bonne pratique à suivre.

La solution "pur Markdown"

Il existe une alternative n’utilisant que du Markdown. Elle se base sur le principe que YouTube dispose d’un serveur fournissant les miniatures des videos et que l’adresse de ces miniatures est déductible facilement à partir d’ID d’une video.

Le code Markdown va être le suivant:
[![texte alternatif de l'image](http://img.youtube.com/vi/g7DpYWR8vqA/0.jpg)](https://www.youtube.com/watch?v=g7DpYWR8vqA "Titre de la video")

Et donnera ce rendu une fois converti en HTML:
texte alternatif de l'image

L’inconvénient de cette méthode est le même que la première utilisée: Lors du clic sur la video, on redirige vers le site de YouTube.

Piste pour améliorer la solution Markdown

Si vous ne souhaitez pas rediriger vos visiteurs sur YouTube, il existe une solution mais elle nécessite l’emploi de javascript.

L’idée est lors du clic sur la miniature, remplacer la miniature par l’iFrame que l’on a vu avec la solution #2. On ne charge alors l’iFrame qu’à la demande et la différence est importante surtout si la page comporte de nombreuses videos.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.