Ajouter une vidéo dans une page via un éditeur de texte

Il existe 2 moyens d'intégrer une vidéo dans un éditeur de texte sur la plateforme.

Méthode simple

La façon la plus simple est de copier-coller le code d'intégration que met à disposition l'hébergeur de votre vidéo (YouTube par exemple). Cela permet de lire la vidéo directement dans le lecteur sur la page.

Pour ce faire, si votre vidéo est sur YouTube, il suffit d'aller sur votre vidéo, de cliquer sur "Partager" sous la vidéo : 

Cliquez ensuite sur "Intégrer" : 

Puis cliquez sur "copier" pour copier en un clic le contenu du code d'intégration : 

Ensuite, dans votre éditeur de texte, cliquez sur "source" et coller le code que vous venez de copier : 

Une fois collé, cliquez de nouveau sur "Source", la vidéo apparaitra de cette façon. Vous pouvez alors la centrer si vous le souhaitez : 

La vidéo apparait maintenant sur la plateforme et peut être visionnée directement dans la fenêtre de lecture : 

Méthode avancée

La plateforme offre aussi la possibilité d'intégrer une vidéo différemment. Il s'agit d'une image avec un bouton de lecture. 

En cliquant dessus, la vidéo s'ouvre dans une grande fenêtre par dessus l'existante (voici un exemple). Cela requiert cependant de manipuler du code html dans l'éditeur de texte.

Trouver le lien de la vidéo

Il nous faut tout d'abord le lien "embed" que va nous fournir l'hébergeur de la vidéo. Il suffit de faire la même manipulation que celle décrite ci-dessus (Partager > Intégrer) afin de retrouver le code. Nous allons ici uniquement copier le lien de la vidéo contenu dans le code. Il est au format https://www.youtube.com/embed/xxxxxxx.

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 ajoutée 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 copié, cliquez sur le bouton Annuler. L'image a déjà été ajouté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 la 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 :

<div class="video">
<div class="video-thumbnail" style="text-align: center;"><img alt="Nom de l'image" src="VOTRE IMAGE" style="height:250px; margin:30px 0; width:440px; border-width: 1px; border-style: solid; border-color: #000000;" /><a class="play fancybox" data-type="iframe" href="VOTRE LIEN?autoplay=1"> <span class="play-button"></span> <span class="triangle"></span> </a></div>
</div>

 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, n'oubliez pas de l'ajouter.

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 autour 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