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

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.

‍

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

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

‍

Convertissez votre vidéo

‍

• Utiliser Convertio pour convertir rapidement MP4 en WebM.
• Utiliser Cloudinary pour héberger et conver

‍

Téléchargez votre vidéo sur Cloudinary

‍

1. ‍Créez un compte gratuit sur Cloudinary.‍
2. Accédez au Tableau de bord → Actifs et téléchargez votre MP4 et WebM fichiers.‍
3. Copiez l'URL de la vidéo directe de 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 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 avec les liens de votre Cloudinary Gestionnaire d'actifs.

‍

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

‍

Maintenant, nous allons ajouter JavaScript pour contrôler la lecture vidéo, 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>

‍

{{blog_article_ad}}

‍

Étape 4 : styliser le lecteur vidéo

‍

Pour faire commandes visibles et réactives, ajoutez ceci CSS pour Webflow's Code personnalisé → Section Head :

<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 lecture automatique et boucle sans commandes, utilisez Video Auto de Finsweet. Cette solution supprime les commandes mais garantit une lecture vidéo fluide.

‍

Conclusion

‍

En mettant en œuvre un lecteur vidéo personnalisé, vous vous assurez la conformité au RGPD, améliorer image de marque, et gagnez contrôle total sur le comportement des vidéos. Si tu veux lecture automatique sans commandes, pensez à utiliser l'Attribute vidéo de Finsweet. Désormais, votre site Webflow peut comporter vidéos entièrement personnalisées et auto-hébergées sans compter sur YouTube ! 🚀 La version native de Webflow Élément vidéo est idéal pour intégrer du contenu provenant de plateformes telles que YouTube et Vimeo, mais il manque de flexibilité en matière de customisation et vidéos auto-hébergées.