Lire des vidéos on hover dans Webflow

Tutoriel
April 28, 2022
3 min
Video Player Icone et Webflow Tuto
Résumez cet article avec une IA
Points clés de l'article

Webflow est un outil magique pour créer des sites web personnalisés. Avec son interface visuelle, vous pouvez styliser les éléments que vous souhaitez comme bon vous semble. En plus de l’interface visuelle, vous avez également la possibilité d’ajouter votre propre code sur vos pages. Ainsi, les possibilités de création sont infinies.

Dans notre tutoriel Webflow du jour, nous allons nous intéresser aux vidéos. Pour être plus précis, nous allons vous montrer comment ajouter une animation de lecture de vidéo au survol de la souris (on hover) grâce à un petit peu de code. Si vous n’y connaissez rien en code (HTML, CSS, Javascript), ne vous inquiétez pas, nous allons vous montrer la procédure de A à Z.

Étape 1 : Direction Webflow

La première étape et peut-être la plus importante de ce tutoriel consiste à vous rendre dans votre projet Webflow. Rendez-vous sur la page et dans la section où vous souhaitez ajouter votre vidéo.

Étape 2 : Background Vidéo

Une fois que vous êtes dans la section, vous pouvez ajouter l’élément background vidéo.

éléments background vidéo Webflow

Vous pouvez alors uploader votre vidéo et lui donner une classe. Il est important de donner une classe précise à cet élément. Dans le style manager, il faudra bien penser à ajuster le z-index de la vidéo pour qu’elle s’affiche correctement.

Upload background vidéo dans webflow
exemple de background vidéo dans webflow

On voit maintenant que notre vidéo est intégrée, mais qu’elle se joue automatiquement et en boucle si vous avez coché cette option. Pour ajouter notre animation au survol de la souris, nous allons ajouter un petit bout de code javascript.

Étape 3 : Code Javascript

Une fois que vous avez ajouté votre vidéo dans l’élément background vidéo et que vous lui avez donné une classe, vous allez pouvoir vous rendre dans les paramètres de votre page.

Dans les paramètres d’une page dans Webflow, nous voyons qu’il y a plusieurs endroits où l’on peut ajouter du code. Dans notre cas, nous allons ajouter le code javascript dans l’éditeur Before Body Tag. A cet endroit, il ne vous suffit plus qu’à copier-coller le code suivant.

Attention, dans les parenthèses de la première ligne après le point, il faut insérer le nom de la classe que vous avez mis à votre vidéo (dans notre cas, nous avons ajouté : video-hover_video). Ainsi, toutes les vidéos qui possèdent cette classe auront automatiquement l’animation.

Le code javascript :

<script>
const vid = document.querySelectorAll('.video-hover_video');
vid.forEach(element => {
  element.getElementsByTagName('video')[0].pause(); 
  element.addEventListener("mouseover", hoverIN, false); 
  element.addEventListener("mouseout", hoverOUT, false);  
  
  function hoverIN(){  
    element.getElementsByTagName('video')[0].play(); 
  } 
  
  function hoverOUT(){  
    element.getElementsByTagName('video')[0].pause(); 
    element.getElementsByTagName('video')[0].currentTime = 0;
  }
});
</script>
code javascript pour avoir l'animation play video on hover dans webflow

Étape 4 : Publication du site

Sur Webflow, vous ne pouvez pas voir les effets d’un code appliqué dans les paramètres de la page directement dans le designer. Pour vérifier que votre effet est bien appliqué, il vous suffit donc de publier votre site et profiter de votre nouvelle animation.

résultat de l'animation play video on hover dans webflow

Voilà, vous savez maintenant comment ajouter l’animation “Play video on hover” ou “Jouer la vidéo au survol” dans Webflow.

Pour en apprendre davantage sur Webflow, vous pouvez retrouver notre blog ou notre chaine YouTube !

Tuto pour appliquer l’effet glassmorphism dans Webflow

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Articles qui devraient vous intéresser

A woman speaks on stage at a conference, wearing a headset microphone. Behind her, a large black screen displays the question “What then?” in bold white text.
Evénements
Webflow

Digidop participe à la FLOWconf 2025, le plus grand événement Webflow & marketing d’Europe.

Digidop participe à la FLOWconf 2025, le plus grand événement Webflow & marketing d’Europe.
Aperçu visuel de plusieurs typographies modernes utilisées sur le web en 2025, chacune présentée sur une image de fond inspirante : Editorial New, DM Serif Display, Aeonik, SF Pro Rounded, Rader, Champ, Monument, Canicule, Clash Display, Supply, Agrandir, et d’autres — une composition graphique mettant en avant la diversité typographique.
Documentation
Design

Les 20 meilleures typographies pour un site web moderne et impactant en 2025

Les 20 meilleures typographies pour un site web moderne et impactant en 2025
Mosaic of homepage designs from several Webflow agencies (Digidop, N4, Refokus, Flow Ninja, Tonik, Finsweet, Edgar Allan), showcasing diverse creative approaches and visual identities centered around the Webflow logo.
Storytelling
Webflow

Mon top 7 des meilleures agences Webflow en 2025 (avis d’un fondateur d’agence)

Mon top 7 des meilleures agences Webflow en 2025 (avis d’un fondateur d’agence)

Transformez votre site web en un moteur de croissance.

Nous contacter