Bonjour,
Dans le cadre de l'utilisation du module « Fond vidéo (https://forum.deltacms.fr/index.php?topic=250.msg5588#msg5588) », j'ai travaillé sur plusieurs ajustements de code afin d'améliorer certains comportements
1. Activation du son sur certaines vidéos
Pour les vidéos dont on souhaite activer le son, il est possible d'ajouter le bouton suivant avant ou après le script fourni par Delta :
<p>
<button onclick="document.getElementById('videofond').muted = false;"
style="background: transparent; color: white; border: 1px solid white;">
Activer le son
</button>
</p>
Démonstration 1 (https://root.my.be/delta/demo2/)
2. Problème des vidéos verticales
Certaines vidéos ne peuvent pas être réenregistrées (absence sur site, vidéo reçue d'un tiers, événement passé, etc.).
Avec le code proposé par Delta, une vidéo verticale s'affiche correctement sur smartphone, mais sur ordinateur une partie de l'image — notamment les têtes — est coupée.
Démonstration 2 (https://root.my.be/delta/demo2/demo-2)
3. Correction apportée
Pour contourner ce problème, j'ai modifié le code initial de Delta en utilisant la version suivante :
<!-- Fond Vidéo -->
<p>
<video style="width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; position: fixed !important; top: 0; left: 0; z-index: -1;"
autoplay muted loop playsinline id="videofond">
<source src="https://delta.fr/site/file/source/VIDEO/AL.mp4">
</video>
</p>
<div id="darkfilter"></div>
<!-- fin du Fond Vidéo -->
Ce code permet une meilleure compatibilité sur smartphone, mais il ne prend malheureusement pas en charge la largeur complète du site sur ordinateur.
Pour l'utiliser, il suffit de remplacer l'URL de la vidéo par la vôtre.
Démonstration 3 (https://root.my.be/delta/demo2/demo-3)
Aucune intervention n'est nécessaire en dehors du code source de la page sur laquelle vous souhaitez intégrer votre vidéo.
Cordialement,
Rebonjour,
J'ai oublié de préciser que le bouton « Activer le son » possède un cadre entièrement transparent.
Si vous souhaitez supprimer ce contour, vous pouvez utiliser le code suivant :
<p>
<button onclick="document.getElementById('videofond').muted = false;"
style="background: transparent; color: white; border: 0px solid white;">
Activer le son
</button>
</p>
Cordialement,
Citation de: Tôt le Mar 23, 2026, 05:47 PMDémonstration 2 (https://root.my.be/delta/demo2/demo-2)
3. Correction apportée
Pour contourner ce problème, j'ai modifié le code initial de Delta en utilisant la version suivante :
Ok, mais la il ne s'agit plus d'un fond vidéo mais de l'affichage pleine page d'une vidéo, le but d'un fond est de remplir le fond...
Ensuite, la seule chose qui change par rapport au css du fond vidéo c'est :
object-fit: contain !important; object-position: center !important;, inutile donc de répéter tout le reste si tu veux afficher ta vidéo en fond de page dans ses proportions
Note que de façon habituelle on choisit une vidéo s'affichant en mode paysage plutôt qu'en portrait, donc celle-ci : https://root.my.be/delta/demo2/site/file/source/VIDEO/CDW.mp4 s'y prette mieux que celle-la : https://root.my.be/delta/demo2/site/file/source/VIDEO/CDW-AL.mp4
Bonjour,
Comme indiqué précédemment, la modification n'occupe pas toute la page en arrière‑plan.
J'ai réalisé cet ajustement pour mon usage personnel et je souhaitais simplement partager l'information au cas où d'autres personnes souhaiteraient appliquer la même modification.
Cordialement,