Ajouter et gérer une vidéo

Importer et gérer vos médias vidéos dans votre projet

Edouard Williamson avatar
Written by Edouard Williamson
Updated over a week ago

RacontR accepte la plupart des formats vidéos, comme le .avi, .mov, .mp4. Une fois optimisées et importées dans la partie médias, vous pouvez les placer sur la scène.

Voici les différentes possibilités de RacontR que nous allons aborder :

  • Insérer une vidéo sur une page

  • Insérer une vidéo YouTube, Dailymotion ou Vimeo

  • Insérer de multiples vidéos sur une page

  • Les propriétés de la vidéo

  • Taille et position

Ajouter une vidéo sur la scène

  1. Pour importer une vidéo sur la scène, cliquez sur le symbole « + » dans la barre d’outils à gauche de l’interface. La liste des éléments à votre disposition apparaît, cliquez sur l’icône vidéo.

  2. La bibliothèque des vidéos comprend toutes les vidéos que vous avez chargées dans l’onglet média. Sélectionnez la vidéo de votre choix, un contour bleu viendra cercler la vidéo sélectionnée. Une fois votre choix fait, cliquez sur « apply » pour placer la vidéo sur la scène.


Insérer une video YouTube, Dailymotion ou Vimeo sur une page

Note : vous devez utiliser l'url de la page et non le lien de partage proposé par la plateforme.

  1. Pour insérer une vidéo, cliquez sur l’onglet « média » dans le menu en haut à droite de l’éditeur de page.

  2. Cliquez sur l’onglet « vidéo »

  3. Vous pouvez ajouter des liens (url des pages, comme mentionné plus haut) vers vos vidéos YouTube, Dailymotion ou Vimeo ici


Ajouter plusieurs vidéos sur la scène

De la même manière que pour les images, vous pouvez importer plusieurs vidéos sur la scène. Cliquez sur la première puis en maintenant la touche maj/shift sélectionnez les suivantes.

Enfin, validez. Les médias apparaissent les uns au dessus des autres dans le coin supérieur gauche de la scène.

Vous pouvez gérer la profondeur (quel élément recouvre quel autre élément) en vous rendant dans la pile des calques.

Propriétés des vidéos

  1. Renommez votre élément (par défaut il gardera le même nom que lorsque vous l’avez mis en ligne), ajoutez une classe pour vos CSS, masquez ou rendez visible les contrôleurs de la vidéo (play/pause, curseur, gestion du son). Choisissez si vous voulez que votre vidéo soit en lecture automatique ou non, en boucle ou non.

  2. Dupliquez-le (en conservant ses proportions et actions) ou remplacez-le.

  3. Gérez l’opacité de vos éléments (de 0 pour le rendre invisible à 100%). Choisissez une couleur pour la bordure, le degré d’arrondi et la taille du contour, la position sur la scène (X/horizontale ou Y/verticale).


Taille et position

  1. Pour déplacer une vidéo, vous pouvez la sélectionner avec la souris et la déplacer n’importe où. Vous pouvez également rendre très précis ses coordonnées X

  2. et Y en les éditant en bas à droite.

  3. Vous pouvez cliquer-déplacer un coin de cette dernière (en maintenant la touche majuscule enfoncée vous conserverez ses proportions), ou rentrer sa largeur

  4. et sa hauteur dans le coin inférieur droit de l’interface.

  5. Vous pouvez verrouiller l’élément sur la scène.

Astuce : si vous désirez que les contrôleurs s'affichent sous la vidéo, faites en sorte que le cadre de sélection soit plus haut que la forme de la vidéo.
Si vous voulez que les contrôleurs s’affichent par dessus la vidéo, faites en sorte que le cadre de sélection épouse bien la forme de votre vidéo.

Did this answer your question?