Comment ajouter un lecteur vidéo personnalisé à votre site Webflow

L'élément Vidéo natif de Webflow est très pratique pour intégrer du contenu YouTube ou Vimeo, mais il manque de flexibilité dès qu'on veut personnaliser le lecteur ou auto-héberger ses vidéos. En suivant ce guide, vous obtiendrez un lecteur vidéo entièrement personnalisé, fidèle à votre marque et sous votre contrôle total, construit en HTML, CSS et JavaScript dans un simple embed.

‍

Pourquoi utiliser un lecteur vidéo personnalisé au lieu de l'élément vidéo natif de Webflow ?

1. Contrôle total du comportement des vidéos : personnalisez les commandes, la lecture automatique, la boucle et les options de plein écran.
2. Conformité au RGPD : contrairement à YouTube, les vidéos auto-hébergées n'utilisent pas de cookies de suivi, ce qui signifie qu'aucun consentement n'est requis.
3. Une meilleure image de marque : aucune marque tierce ni aucune vidéo suggérée après la lecture.
4. Des performances optimisées : les vidéos MP4/WebM auto-hébergées se chargent plus rapidement et ne dépendent pas de services externes. Hébergées sur Cloudinary, elles préservent aussi votre bande passante Webflow (voir notre guide sur l'optimisation de la bande passante Webflow).

‍

Étape 1 : convertir et héberger votre vidéo

Avant d'ajouter un lecteur vidéo, assurez-vous que votre vidéo existe aux formats MP4 et WebM pour une compatibilité maximale.

Convertissez votre vidéo

• Utilisez Convertio pour convertir rapidement un MP4 en WebM.
• Utilisez Cloudinary pour héberger et convertir votre vidéo.

Téléchargez votre vidéo sur Cloudinary

1. Créez un compte gratuit sur Cloudinary.
2. Accédez au Tableau de bord → Assets et importez vos fichiers MP4 et WebM.
3. Copiez l'URL directe de la vidéo depuis Cloudinary.

‍

Étape 2 : ajouter le code du lecteur vidéo personnalisé

Maintenant que votre vidéo est prête, vous devez l'insérer dans Webflow à l'aide de HTML, CSS et JavaScript personnalisés.

Ajoutez ce code dans un élément d'intégration (Embed) dans Webflow :

<video class="video" width="100%" height="100%">
    <source src="https://res.cloudinary.com/your-account/video.mp4" type="video/mp4">
    <source src="https://res.cloudinary.com/your-account/video.webm" type="video/webm">
</video>

Remplacez les URL par les liens de votre gestionnaire d'assets Cloudinary.

‍

Étape 3 : ajouter des commandes de lecteur vidéo personnalisées

Maintenant, nous allons ajouter du JavaScript pour contrôler la lecture, la pause, le plein écran et le suivi de la progression.

Insérez ce code JavaScript dans la section de code personnalisé de Webflow :

<script>
  document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll("video").forEach(video => {
      const container = document.createElement("div");
      container.classList.add("video-container");
      video.parentNode.insertBefore(container, video);
      container.appendChild(video);

      const controls = document.createElement("div");
      controls.classList.add("video-controls");

      const playPauseBtn = document.createElement("button");
      playPauseBtn.classList.add("video-button");
      playPauseBtn.innerHTML = `
        <svg id="pauseIcon" width="24" height="24" fill="white">
          <path d="M8 19c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2v10c0 1.1.9 2 2 2m6-12v10c0 1.1.9 2 2 2s2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2"></path>
        </svg>
        <svg id="playIcon" width="24" height="24" fill="white" style="display: none;">
          <path d="M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18a1 1 0 0 0 0-1.69L9.54 5.98A.998.998 0 0 0 8 6.82"></path>
        </svg>
      `;
      controls.appendChild(playPauseBtn);

      const progressContainer = document.createElement("div");
      progressContainer.classList.add("video-progress-container");

      const progressBar = document.createElement("div");
      progressBar.classList.add("video-progress-bar");
      progressContainer.appendChild(progressBar);
      controls.appendChild(progressContainer);

      const fullscreenBtn = document.createElement("button");
      fullscreenBtn.classList.add("video-button");
      fullscreenBtn.innerHTML = `
        <svg width="24" height="24" fill="white">
          <path d="M4 4h6v2H6v4H4V4m10 0h6v6h-2V6h-4V4m-6 10v4h4v2H4v-6h2m16 0v6h-6v-2h4v-4h2"></path>
        </svg>
      `;
      controls.appendChild(fullscreenBtn);
      container.appendChild(controls);

      playPauseBtn.addEventListener("click", () => {
        if (video.paused) {
          video.play();
          playPauseBtn.querySelector("#playIcon").style.display = "none";
          playPauseBtn.querySelector("#pauseIcon").style.display = "block";
        } else {
          video.pause();
          playPauseBtn.querySelector("#playIcon").style.display = "block";
          playPauseBtn.querySelector("#pauseIcon").style.display = "none";
        }
      });

      fullscreenBtn.addEventListener("click", () => {
        if (video.requestFullscreen) {
          video.requestFullscreen();
        } 
      });

      video.addEventListener("timeupdate", () => {
        const percent = (video.currentTime / video.duration) * 100;
        progressBar.style.width = `${percent}%`;
      });

      progressContainer.addEventListener("click", (e) => {
        const rect = progressContainer.getBoundingClientRect();
        const offsetX = e.clientX - rect.left;
        video.currentTime = (offsetX / rect.width) * video.duration;
      });
    });
  });
</script>

‍

Étape 4 : styliser le lecteur vidéo

Pour rendre les commandes visibles et responsives, ajoutez ce CSS dans le Custom Code → section Head de Webflow :

<style>
.video-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.video-controls {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  padding: 8px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.video-container:hover .video-controls {
  opacity: 1;
}
.video-button {
  background: none;
  border: none;
  cursor: pointer;
}
.video-progress-container {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  position: relative;
}
.video-progress-bar {
  width: 0%;
  height: 100%;
  background: white;
}
</style>

‍

Alternative : lecture automatique avec Finsweet

Si vous souhaitez que votre vidéo soit en lecture automatique et en boucle sans commandes, utilisez Auto Video de Finsweet. Cette solution supprime les commandes mais garantit une lecture vidéo fluide. Et si vos vidéos vivent dans des items CMS (portfolio, blog, cas clients), notre tutoriel sur l'ajout de vidéos dans une collection CMS Webflow couvre ce workflow en détail.

‍

Conclusion

En mettant en œuvre un lecteur vidéo personnalisé, vous assurez la conformité au RGPD, vous renforcez votre image de marque et vous gagnez un contrôle total sur le comportement des vidéos. Si vous voulez une lecture automatique sans commandes, pensez à Auto Video de Finsweet. Désormais, votre site Webflow peut intégrer des vidéos entièrement personnalisées et auto-hébergées sans dépendre de YouTube !

Et si vous préférez confier ce type de développement sur mesure à des spécialistes, notre agence Webflow intègre lecteurs personnalisés, animations et embeds dans chacun de ses projets : parlons-en.