Vidéo d'arrière-plan Divi qui ne démarre pas sur iPhone

Si vous avez déjà mis une vidéo en fond sur une section Divi et qu’elle reste figée sur iPhone, ce correctif règle le problème. Il vient d’un fil Reddit, je l’ai testé et il fonctionne.

Le cas

J’avais une section Divi avec une vidéo en arrière-plan, et à l’intérieur un slider de plusieurs diapositives. Sur mon Pixel 6, sur le Xiaomi 11 Lite et sur les navigateurs de bureau (Edge, Firefox, Chrome), la vidéo se lançait normalement. Sur iPhone, elle ne démarrait pas toute seule : première image affichée, rien d’autre.

Le comportement vient de la politique de lecture automatique de Safari sur iOS. Une vidéo en fond de section doit être muette pour démarrer seule, et Divi ne pose pas toujours l’attribut au bon moment, surtout quand il y a un slider dans la section.

Le correctif

À coller dans le fichier functions.php du thème enfant, ou dans un plug-in de code personnalisé :

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery(".et_pb_section_video_bg video").prop('muted', true);
});
</script>

La ligne force l’attribut muted sur toutes les vidéos d’arrière-plan de section, une fois la page chargée. Safari accepte alors la lecture automatique, et la vidéo démarre.

Source du script : Reddit, r/divi.

Ce qu’il faut savoir

Le sélecteur .et_pb_section_video_bg video cible uniquement les vidéos de fond de section. Il ne touche pas aux vidéos d’un module Vidéo ni à celles d’un slider. Si votre vidéo est dans un module, il faut adapter le sélecteur.

Le script suppose que jQuery est chargé, ce qui est le cas par défaut avec Divi. Si vous l’avez désactivé pour des raisons de performance, il faut passer par DOMContentLoaded en JavaScript natif.

Enfin, cette correction date de 2022. Divi a évolué depuis, et les versions récentes posent l’attribut muted elles-mêmes dans la plupart des cas. Vérifiez d’abord si le problème existe encore avant d’ajouter du code.