Ajouter une vidéo dans un éditeur de texte

La plateforme offre la possibilité d'intégrer une vidéo dans n'importe quel éditeur de texte de l'administration. Cela requiert cependant de manipuler du code html dans l'éditeur de texte.

Trouver le lien de la vidéo

Avant toute opération sur la plateforme, il faut disposer du lien de la vidéo que l'on souhaite intégrer. La vidéo ne peut être hébergée sur la plateforme, elle doit l'être sur un service tel que YouTube, Dailymotion, Vimeo, etc. Ces services proposent généralement en-dessous de chaque vidéo un code d'intégration dans lequel on peut voir apparaitre un lien contenant "embed". C'est ce lien qui nous intéresse. Sur Youtube par exemple, il faut cliquer sur Partager puis sur Intégrer : 

Trouver le lien de l'image qui servira d'illustration

Il est également nécessaire de définir l'image sur laquelle il faudra cliquer pour ouvrir la vidéo. Cette image doit être uploadé séparément, dans n'importe quel éditeur de texte : Voir l'article  Comment publier une image ?

Suivre cette procédure vous permettra d'obtenir un lien qui a un format similaire au lien suivant : media/default/0001/01/fbe185443d2043f319dd1da6ccbb7600007c21ba.png

Une fois le lien copier, cliquez sur le bouton Annuler. L'image a déjà été uploadée sur le serveur et seul le lien nous intéresse. Tout comme le lien de la vidéo, il doit être gardé de côté pour plus tard.

Ajouter une vidéo dans un éditeur de texte

1 - Trouvez l'éditeur de texte correspondant à la zone dans laquelle vous souhaitez intégrer votre vidéo.

2 - Cliquez sur le bouton  Source de l'éditeur de texte.

3 - Ajoutez le code suivant :

<p style="text-align:center"><a class="play fancybox play--black" data-type="iframe" href="VOTRELIEN?autoplay=1""><img alt="Nom de l'image" src="VOTREIMAGE" style="height:250px; margin:30px 0; width:440px; border-width: 1px; border-style: solid; border-color: #000000;" /></a></p>

4 - Dans le code, remplacez "VOTRELIEN"  par le lien embed de votre vidéo. Le  ?autoplay=1 collé au lien permet de lancer la vidéo automatiquement lorsque l'utilisateur clique dessus.

5 - Remplacez également "VOTREIMAGE" dans le code ci-dessus par le lien de votre image. Vous pouvez par ailleurs lui donner un nom pour un meilleur référencement en remplaçant "Nom de l'image" par une description de votre image.

Pour plus de réglages

  • Changez la hauteur et la largeur de l'image avec height et width. Le chiffre indiqué correspond à la taille en pixel.
  • "border-width: 1px; border-style: solid; border-color: #000000;" permettent d'afficher une bordure d'1 pixel de couleur noire autours de l'image. Vous pouvez changer la couleur et la taille de la bordure
  • La class "play fancybox play--black" permet d'afficher un bouton play de couleur noire. Remplacez black par white pour rendre blanc le bouton play
  • <p style="text-align:center"> permet de centrer la vidéo. Remplacez center par left ou right pour la mettre à gauche ou à droite

Vous ne trouvez pas de réponses à votre question ? Contactez-nous Contactez-nous