Divi video autoplay : démarrer une vidéo automatiquement

par Jean - netologiste.com | Mis à jour le 21 Nov 2023 | Divi | 35 commentaires

Les explications de cet article ont été complétées et revues en janvier 2020 puis en octobre 2023.

Table des matières
  1. Lancer une vidéo au chargement de la page : introduction
  2. Intégrer une vidéo YouTube dans un site Web en général (WordPress ou non)
  3. Activer l'autoplay
  4. J'ai tout bien fait, mais la vidéo ne se lance pas …
  5. Lancer une vidéo YouTube sans le son (sourdine)
  6. WordPress : lancer une vidéo en autoplay dans un bloc Gutenberg
  7. L'ajout de vidéos dans Divi
  8. Lancer la vidéo en autoplay avec un module vidéo Divi
  9. Lancer la vidéo en autoplay avec un module code Divi
  10. Jouer une vidéo en boucle (loop) avec une intégration YouTube HTML
  11. Cacher les boutons contrôles d'une vidéo YouTube
  12. Enlever les suggestions de vidéos à la fin de votre propre vidéo
  13. Cacher, enlever ou supprimer le logo YouTube d'une vidéo
  14. Autres paramètres YouTube
  15. Démarrer automatiquement une vidéo intégrée en MP4 dans Gutenberg
  16. Divi vidéo autoplay : démarrer automatiquement une vidéo MP4 – méthode Javascript
  17. Modifier notre code Javascript pour couper le son de la vidéo mp4 au démarrage
  18. Jouer une vidéo en boucle avec Divi (loop) – méthode Javascript
  19. Cacher les boutons contrôles d'une vidéo Divi – méthode Javascript
  20. Et en HTML ?
  21. Vidéo autoplay avec slider vidéo (curseur de défilement vidéo) – méthode Javascript
  22. Vidéo autoplay en fond de section (background video)
  23. Peut-on utiliser cet autoplay avec d'autres builders comme Oxygen, Elementor, Beaver Builder, Brizy, WP Bakery, Visual Composer ?
  24. "Je n'y arrive toujours pas …" ?
  25. Mise à jour avril 2021 : vers une interdiction de la lecture automatique des vidéos en France
  26. Mise à jour octobre 2023 : revue de l'intégralité de l'article

Lancer une vidéo au chargement de la page : introduction

Comment on peut activer l’autoplay sur une vidéo dans un site Web, c’est-à-dire démarrer automatiquement la vidéo sans que le visiteur ait besoin de cliquer sur le bouton « Play » ? L’objectif est que, dès que le visiteur ouvre la page, la vidéo se lance.

Je vais aborder le cas des vidéos YouTube, intégrées dans n’importe quel site Web.
Et aussi, l’intégration des vidéos YouTube dans WordPress.
Puis, plus spécifiquement, le cas des vidéos intégrées avec Divi :

  • les vidéos mp4 intégrées dans un site Divi
  • et les vidéos YouTube intégrées dans Divi

Divi est le thème WordPress le plus populaire au monde : voir qu’est-ce que Divi ?

Intégrer une vidéo YouTube dans un site Web en général (WordPress ou non)

Pour intégrer une vidéo YouTube dans un site Web, on va :

  • Se rendre sur la page de la vidéo YouTube
  • Cliquer sur Partager
  • Puis sur intégrer
  • Sélectionner et copier le code HTML qui nous est donné
  • Le coller dans notre site à l’endroit adéquat

Si vous ne savez pas où mettre ce code dans votre site, j’ai fait un tutorial spécifique pour cela dans la formation « Découvrir Divi ».

Activer l’autoplay

Pour activer l’autoplay, on va ajouter le paramètre suivant à l’URL de la vidéo YouTube quand on l’intègre :

?autoplay=1

Par exemple, l’URL YouTube standard suivante :

https://www.youtube.com/embed/jKeqLCf0VcQ

devient

https://www.youtube.com/embed/jKeqLCf0VcQ?autoplay=1

Attention, si vous avez déjà des paramètres dans votre URL, par exemple :

https://www.youtube.com/embed/jKeqLCf0VcQ?start=6

le paramètre complémentaire s’ajoute alors avec une esperluette, car on ne doit avoir qu’un seul point d’interrogation dans une URL (le premier paramètre d’une URL est précédé d’un point d’interrogation, les suivants d’une esperluette), ce qui donne :

https://www.youtube.com/embed/jKeqLCf0VcQ?start=6&autoplay=1

Au cas où ceci est trop compliqué pour vous, pas de panique, je suis en train de préparer des vidéos pour débutants qui expliquent en détail comment sont structurées les URLs sur le Web, cela se trouve sur la plateforme e-learning app.netologiste.com, avec inscription gratuite. Vous pouvez y laisser des commentaires et demander des tutoriels ou formations spécifiques.

Sans le paramètre autoplay=1 : la vidéo est bien intégrée au site, mais ne se lance pas

Avec le paramètre autoplay=1 : la vidéo se lance automatiquement au lancement de la page.

Si cela ne marche pas pour vous, il y a 2 causes principales possibles :

  • soit vous avez fait une erreur dans l’ajout du paramètre à votre URL
  • soit votre navigateur n’autorise pas l’autoplay sur cette vidéo.

J’ai tout bien fait, mais la vidéo ne se lance pas …

Et oui ! Les navigateurs n’acceptent plus qu’un site Web lance des vidéos automatiquement, ça peut fonctionner, mais seulement dans certains cas.

Vous pouvez trouver des informations sur ces restrictions dans cette page du site Google Developers : https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Et comme c’est en anglais, je vais vous traduire les informations principales :

Changement dans la politique de fonctionnement de l’autoplay dans le navigateur Google Chrome

Le navigateur Chrome a implémenté une mise à jour qui bloque l’autoplay des vidéos.

Les navigateurs intègrent des politiques plus strictes sur l’autoplay des vidéos pour les raisons suivantes :

  • améliorer l’expérience des utilisateurs
  • minimiser les incitations à installer des bloqueurs de publicités (adblockers)
  • et réduire la consommation de données sur des réseaux coûteux et / ou limités

Ils nous montrent même 2 mèmes à ce sujet, expliqués dans la vidéo en haut de cet article.

En résumé, il y a des mesures de blocage de l’autoplay mises en place par les éditeurs des navigateurs Web.

Ces modifications visent à donner un meilleur contrôle de la lecture aux utilisateurs et à bénéficier aux éditeurs de cas d’utilisation légitimes.

La politique d’autoplay de Chrome fonctionne comme cela :

  • L’autoplay de vidéos en sourdine (sans son) est autorisé, avec le son désactivé par défaut
  • L’autoplay de vidéos avec le son activé est autorisé si :
    • L’utilisateur a interagi avec le domaine
    • Sur ordinateur de bureau, l’indicateur qui s’appelle « user Media Engagement Index » a passé le seuil d’autorisation, que l’utilisateur a déjà joué une vidéo avec du son
    • Encore sur ordinateur, autoplay est autorisé si l’utilisateur a installé la Progressive Web App du site
    • Sur mobile, l’utilisateur a ajouté le site a leur écran d’accueil
  • Les sites peuvent déléguer leurs autorisations de permission aux iframes qu’ils contiennent. Par exemple, intégrer une vidéo YouTube utilise une iframe

On arrive donc dans du cas par cas complexe, sur lequel nous n’avons quasiment aucun contrôle. En gros :

  • soit vous laissez tomber l’autoplay si ce n’est pas crucial pour vous
  • soit vous le mettez en vous disant que ça marchera pour un visiteur sur deux
  • soit vous mutez, mettez en sourdine, la vidéo au démarrage, ce qui laisse le choix à l’utilisateur d’activer le son ou non

Voici les explications pour lancer la vidéo sans le son.

Lancer une vidéo YouTube sans le son (sourdine)

On va ajouter le paramètre mute=1

Ce qui donne, avec le paramètre autoplay :

?autoplay=1&mute=1

Ou si vous avez déjà un autre paramètre :

?start=6&autoplay=1&mute=1

Donc si vous intégrez une vidéo YouTube directement avec son URL, le résultat est :

https://www.youtube.com/embed/jKeqLCf0VcQ?autoplay=1&mute=1

En inclusion iframe, c’est la mème chose :

Au lieu de :

<iframe width="560" height="315" src="https://www.youtube.com/embed/jKeqLCf0VcQ" allowfullscreen=""></iframe>

On va avoir :

<iframe width="560" height="315" src="https://www.youtube.com/embed/jKeqLCf0VcQ?autoplay=1&mute=1" allowfullscreen=""></iframe>

Et voilà ! L’autoplay en coupant le son devrait fonctionner à peu près partout.

Voyons maintenant les cas particuliers, selon les outils utilisés : Gutenberg, Divi, YouTube, mp4.

WordPress : lancer une vidéo en autoplay dans un bloc Gutenberg

L’éditeur par défaut de WordPress s’appelle Gutenberg, il utilise un système de blocs.

Même dans un site qui utilise Divi, on peut avoir certaines pages construites avec Gutenberg, et d’autres avec Divi. Voyons donc comment jouer une vidéo en autoplay avec Gutenberg.

Il y a plusieurs moyens d’intégrer une vidéo YouTube avec Gutenberg : utiliser un bloc YouTube, un bloc HTML personnalisé, un bloc texte et l’éditer en HTML, etc.

Dans un bloc Gutenberg YouTube, Si vous essayez d’éditer l’URL de la vidéo en faisant « Modifier en HTML », le bloc fera une erreur, comme ceci :

Vous pouvez toutefois intégrer la vidéo dans votre site en utilisant un bloc Gutenberg « HTML personnalisé ». Le code à mettre dans ce bloc est le code de partage de la vidéo que vous trouvez sur YouTube en faisant « Partager », puis « Intégrer » :

Ajoutez simplement les paramètres d’autoplay et de sourdine à l’URL de votre vidéo :

?autoplay=1&mute=1

Exemple :

<iframe width="560" height="315" src="https://youtu.be/AGVaXVuBz4o?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Démo réelle avec un bloc Gutenberg « HTML personnalisé » :

L’ajout de vidéos dans Divi

Le thème WordPress « Divi » est un éditeur visuel de pages Web, qui fonctionne avec des modules. Le module vidéo de Divi permet d’ajouter des vidéos de différentes manières :

  • d’intégrer une vidéo externe à partir d’une adresse Web, comme une vidéo YouTube
  • de téléverser et héberger sur votre site votre propre vidéo, au format mp4 ou webm

Le module vidéo Divi qui vous permet d’ajouter une vidéo dans vos pages :

Module vidéo Divi

Vous pouvez choisir d’intégrer une vidéo externe, comme une vidéo YouTube, en choisissant « Insérer à partir d’une adresse web » :

Divi ajouter vidéo YouTube

Ou bien de téléverser votre propre vidéo, en choisissant « .MP4 URL de la vidéo » ou le format « WEBM » :

Divi ajouter vidéo mp4

Lancer la vidéo en autoplay avec un module vidéo Divi

Le module vidéo de Divi ne permet pas de lancer une vidéo automatiquement. Pas d’option d’autoplay possible directement.

Pour palier ceci, vous pouvez utiliser un module de code dans Divi au lieu d’un module vidéo, comme expliqué ci-dessous.

Lancer la vidéo en autoplay avec un module code Divi

Ajoutez un module « Code » à votre page Divi :

Sur la page YouTube de la vidéo que vous souhaitez intégrer, suivez les étapes décrites en haut de cet article : Partager, puis Intégrer, puis Copier :

Et collez le code dans votre module code Divi

Ajoutez les paramètres autoplay et mute vus en haut de cet article :

Ce sont les exactes mêmes étapes que la technique expliquée ci-dessus pour le bloc Gutenberg. La seule différence est qu’avec Gutenberg, on utilise un module « HTML personnalisé » dans lequel on met du HTML, et avec Divi, un module « Code » dans lequel on met du HTML. Ce sont des intégrations HTML standards.

Jouer une vidéo en boucle (loop) avec une intégration YouTube HTML

Pour jouer la vidéo en boucle, ajoutez simplement le paramètre loop=1 à votre URL YouTube :

<iframe width="560" height="315" src="https://www.youtube.com/embed/PJZ2HaTGWVk?autoplay=1&mute=1&loop=1" allowfullscreen></iframe>

Cacher les boutons contrôles d’une vidéo YouTube

Pour cacher les boutons « Play », « Volume », « Plein écran » = les contrôles d’une vidéo YouTube, on lui ajoute le paramètre ?controls=0 (ou &controls=0 si vous avez déjà des paramètres dans l’URL):

On utilise :

<iframe width="560" height="315" src="https://www.youtube.com/embed/jKeqLCf0VcQ?controls=0" allowfullscreen=""></iframe>

Exemple réel :

Enlever les suggestions de vidéos à la fin de votre propre vidéo

Lorsqu’une vidéo YouTube se termine, elle propose systématiquement d’autres vidéos en suggestions.

Jusqu’à septembre 2018, il était possible de les désactiver avec le paramètre rel=0.

Depuis, YouTube ne propose plus cette option pour enlever les vidéos suggérées.

Toutefois, l’utilisation de ce paramètre permet de limiter les suggestions de vidéos aux vidéos de votre propre chaîne YouTube (de la chaîne YouTube à laquelle la vidéo que vous intégrez appartient).

Exemple d’intégration de ce paramètre rel=0 :

<iframe width="560" height="315" src="https://www.youtube.com/embed/PJZ2HaTGWVk?rel=0" allowfullscreen></iframe>

Cacher, enlever ou supprimer le logo YouTube d’une vidéo

Un autre paramètre utile : modestbranding=1

Ceci enlève le gros logo YouTube de la vidéo. YouTube sera toujours mentionné en petit.

Autres paramètres YouTube

Voici la liste officielle des paramètres utilisables lorsqu’on intègre une vidéo YouTube :

https://developers.google.com/youtube/player_parameters?hl=fr

Démarrer automatiquement une vidéo intégrée en MP4 dans Gutenberg

Si vous utilisez une vidéo mp4 avec le bloc Gutenberg « Video », il y a déjà les options disponibles de lecture automatique et sourdine directement dans WordPress :

Divi vidéo autoplay : démarrer automatiquement une vidéo MP4 – méthode Javascript

Si dans un module vidéo Divi, vous intégrez une vidéo MP4 au lieu d’une URL YouTube, vous n’avez pas la possibilité de mettre un paramètre URL autoplay tout simple, comme avec une URL YouTube.

Pour que la vidéo MP4 intégrée par le module vidéo Divi démarre automatiquement au chargement de la page, sans que le visiteur ait besoin de cliquer sur « Play », il existe un petit code Javascript facile à mettre en oeuvre si vous avez des notions de base en Web.

Javascript, pour résumer simplement, est le langage de programmation qui va avec les sites Web et qui permet de programmer des actions. Cette méthode Javascript fonctionne avec une vidéo mp4 mise dans un module vidéo Divi, mais pas avec une vidéo YouTube mise dans un module vidéo Divi.

Il existe différentes manières d’ajouter du Javascript à une page, nous allons utiliser la plus simple pour l’exemple et lancer la vidéo mp4 automatiquement.

En premier lieu, donnez un identifiant à votre module vidéo, dans l’onglet avancé du module, champ « ID CSS » et retenez-le, ici j’ai mis « mavideo » (voir la vidéo en haut de cet article pour reproduire les manipulations démontrées) :

Ensuite, ajoutez un module de code :

Divi autoplay video jquery

Dans le champ « Contenu » du module de code, ajoutez le code suivant, en remplacant « mavideo » par l’identifiant que vous avez donné à votre module vidéo (laisser le dièse # avant l’id). Par exemple si vous avez nommé votre module vidéo : « videoduchat », remplacez « #mavideo » par « #videoduchat » dans le Javascript.

<script type="text/javascript">
  jQuery(function() {
    jQuery('#mavideo .et_pb_video_box video').get(0).play();
});
</script>

Explications du code :

jQuery est une librairie Javascript qui facilite et étend le code Javascript. jQuery est déjà intégré dans WordPress.

La première fonction se lance au chargement de la page.

Le dièse signifie qu’on appelle un identifiant.

.et_pb_video_box video signifie qu’on vise la balise video, située dans un conteneur de classe « et_pb_video_box », elle-même située dans un conteneur à l’identifiant « mavideo ».

get(0) sélectionne le premier élément de cette sélection.

play() est la fonction qui lance la vidéo

Modifier notre code Javascript pour couper le son de la vidéo mp4 au démarrage

Pour ce faire, on ajoute dans notre code Javascript la propriété « muted », qui veut dire en sourdine, de la manière suivante :

<script type="text/javascript">
  jQuery(function() {
    jQuery('#mavideo .et_pb_video_box video').prop("muted", true);
    jQuery('#mavideo .et_pb_video_box video').get(0).play();
});
</script>

Jouer une vidéo en boucle avec Divi (loop) – méthode Javascript

Pour lancer la lecture en boucle, ajoutez l’attribut loop. Cependant, certains navigateurs refusent de lancer une vidéo en boucle si le son n’est pas désactivé par défaut. Voici donc le code final :

 jQuery(function() {
    jQuery('#mavideo .et_pb_video_box video').attr("loop",true).prop("muted", true);
    jQuery('#mavideo .et_pb_video_box video').get(0).play();
});

Précision ajoutée par Foucauld le 29 nov 2019

Cacher les boutons contrôles d’une vidéo Divi – méthode Javascript

Pour cacher les boutons « Play », « Volume », « Plein écran » … d’une vidéo affichée avec un module Divi, on ajoute ceci au Javascript :

jQuery('#mavideo .et_pb_video_box video').removeAttr('controls');

Ce qui donne, pour autoplay, couper le son au démarrage, et cacher les contrôles :

<script type="text/javascript">
  jQuery(function() {
    jQuery('#mavideo .et_pb_video_box video').prop("muted", true);
    jQuery('#mavideo .et_pb_video_box video').get(0).play();
    jQuery('#mavideo .et_pb_video_box video').removeAttr('controls');
});
</script>

Et en HTML ?

Si vous travaillez directement en HTML, vous pouvez regarder du côté de l’attribut « autoplay » à appliquer à la balise :

<video autoplay>

ou

<video autoplay="autoplay">

Vidéo autoplay avec slider vidéo (curseur de défilement vidéo) – méthode Javascript

Avec du mp4, module « Curseur de défilement vidéo » (slider de vidéos) à qui on a donné l’identifiant CSS slidervideos

Lance automatiquement la première vidéo du slider :

<script type="text/javascript">
  jQuery(function() {
    jQuery('#slidervideos .et_pb_video_box video').get(0).play();
});
</script>

Lance automatiquement la deuxième vidéo du slider, mais c’est la première qui est visible :

<script type="text/javascript">
  jQuery(function() {
    jQuery('#slidervideos .et_pb_video_box video').get(1).play();
});
</script>

Lance automatiquement la première vidéo du slider, avec sélecteur modifié pour le slider de vidéos :

<script type="text/javascript">
  jQuery(function() {
    jQuery('#slidervideos .et_pb_slide video').get(0).play();
});
</script>

Ensuite si vous voulez lancer la vidéo du slide en cours au moment où le slide qui contient la vidéo apparaît, il faut trouver l’événement Javascript correspond et y lancer le code play().

Vidéo autoplay en fond de section (background video)

Par définition, une vidéo de fond est là pour faire joli : elle n’a pas de contrôles. Elle est donc automatiquement en autoplay et en sourdine. C’est le comportement par défaut des vidéos de fond de Divi, et il n’y a pas d’autres options dans le module.

Si vous regardez le code créé par Divi lorsqu’on met une vidéo en fond, il ressemble à :

<video loop="loop" autoplay playsinline muted>

Forcer à remettre le son (enlever le « mute ») est possible en Javascript, mais dans ce cas, les navigateurs bloqueront l’autoplay, puisqu’une vidéo en autoplay avec du son est interdite dans la plupart des cas comme vu plus haut.

Il n’est vraiment pas conseillé d’utiliser une vidéo de fond avec du son, la plupart des visiteurs se demanderont d’où vient le son et fermeront la page rapidement.

Peut-on utiliser cet autoplay avec d’autres builders comme Oxygen, Elementor, Beaver Builder, Brizy, WP Bakery, Visual Composer ?

Oui, trouvez simplement un endroit dans votre page dans lequel vous pouvez inclure du HTML, suivez attentivement les détails de cet article et la vidéo d’explications en haut, vous devriez pouvoir les adapter à votre propre cas.

« Je n’y arrive toujours pas … » ?

Le support technique de Divi se trouve à l’endroit où vous avez acheté Divi, sur le site d’Elegant Themes. C’est à eux que vous pouvez vous adresser lorsque vous avez des questions sur votre utilisation de Divi.

Vous pouvez également réserver de l’aide WordPress/Divi ici.

Mise à jour avril 2021 : vers une interdiction de la lecture automatique des vidéos en France

Dans la vidéo ci-dessus, je vous explique pourquoi il ne faut pas mettre l’autoplay sur des vidéos.

Depuis, la loi française étudie la possibilité de rendre cet autoplay illégal.

Source : Numérama

Mise à jour octobre 2023 : revue de l’intégralité de l’article

Meilleure organisation des titres et paragraphes, corrections, et suppression des textes superflus.

Si ces explications vous ont plu, je réalise des centaines de vidéos comme ça, mais je ne les met pas sur YouTube : vous les trouverez dans la plateforme e-learning qui se trouve à l’adresse app.netologiste.com
L’inscription est gratuite, il vous suffit d’une adresse email. S’inscrire

35 Commentaires

  1. laporte

    Bonsoir,
    Il y a un soucis dans votre page.
    L’info est manquante. On a:
    1

    Réponse
    • Jean - netologiste.com

      Bonsoir, le code a été reparé

      Réponse
  2. Janet

    SUper! j’ai réussit !

    Mais à la fin de la vidéo elle s’arrête et il faut cliquer dessus de nouveau pour qu’elle se lance.

    Il n’y a pas un moyen pour qu’elle se relance automatiquement non stop?

    Merci beaucoup tes astuces sont vraiment géniales !

    Réponse
    • Jean - netologiste.com

      Bonjour,
      Bravo !
      Pour jouer la vidéo en boucle, vous pouvez voir du côté de l’attribut loop ou de l’événement de fin de vidéo (onended, videoEnd).
      Cordialement

      Réponse
  3. Simon

    Bonjour!

    Merci pour ces renseignements!

    Pour avoir un lancement autoplay de la vidéo mais seulement à partir du moment où la vidéo est affiché (ex: en milieu de page), comment fait-on?

    Merci d’avance!

    Réponse
    • Jean - netologiste.com

      Bonjour Simon,
      Pour lancer la vidéo à partir du moment où elle est affichée, il faut lui enlever l’autoplay par défaut et faire un javascript qui va détecter lorsqu’elle arrive dans le viewport et la lancer à ce moment là.
      Je ne peux pas vous faire le code en 5min ici comme ça, si vous ne trouvez pas vous pourrez me contacter pour que je vous le fasse en prestation
      Bon courage

      Réponse
  4. Ingrid

    Bonjour,

    J’ai ajouté votre code pour l’autoplay seulement je ne l’utilise pas sur un bloc vidéo mais un bloc Curseur de défilement vidéo . Faut-il remplacer cette partie ‘.et_pb_video_box video’ et si oui par quoi ? En cherchant sur internet je n’ai pas trouvé la class pour ce bloc.

    Merci beaucoup par avance !

    Réponse
    • Jean - netologiste.com

      Bonjour Ingrid, bonne question !
      Je viens de mettre à jour l’article avec des pistes pour cela (tout en bas : Vidéo autoplay avec slider vidéo (curseur de défilement vidéo))

      Réponse
  5. Francois Jacob

    Super, ça fonctionne à merveille en autoplay et mute!!!
    Merci Jean!

    Réponse
    • Jean - netologiste.com

      Merci François !

      Réponse
  6. Lacroix

    Bonjour,

    Comment définir un temps de démarrage pour des vidéos différentes ?

    ex : vidéo 1 démarre à 2min après le chargement de la page

    ex : vidéo 2 démarre à 5min après le chargement de la page

    Merci d’avance !!

    Réponse
    • Jean - netologiste.com

      Bonjour,
      Pour cela, en Javascript :
      1. Trouver l’instruction qui lance votre vidéo, par exemple jQuery(‘votre_selecteur’).play()
      2. Délayer le lancement de cette instruction, par exemple avec setTimeout()

      Réponse
  7. Youri MAILLEFORT

    Merci pour ce tuto ! Ca fonctionne partout sauf sur Iphone (safari) pour moi !
    Auriez vous une solution ?

    J’ai 3 vidéo en fonction du format de l’écran donc j’ajoute le lecteur en fonction de la width.

    Voici mon code :

    if ( jQuery(window).width() > 1024 ) { //desktop

    jQuery(‘#mavideo .et_pb_video_box video’).addClass(« non »);
    jQuery(‘#mavideo .et_pb_video_box’).append(
     »  »
    );
    sessionStorage.setItem(‘introVideo’,’1′);
    } else if ( jQuery(window).width() 420) { // tablette
    jQuery(‘#mavideo .et_pb_video_box video’).addClass(« non »);
    jQuery(‘#mavideo .et_pb_video_box’).append(
     »  »
    );
    sessionStorage.setItem(‘introVideo’,’1′);

    } else if ( jQuery(window).width() <= 420 ) { //mobile
    jQuery('#mavideo .et_pb_video_box video').addClass("non");
    jQuery('#mavideo .et_pb_video_box').append(
    "  »
    );
    sessionStorage.setItem(‘introVideo’,’1′);
    }

    Réponse
  8. miloud

    bonjour comment lire une seule fois une vidéo autoplay qui tourne en boucle sur wordpress avec le théme divi merci.

    vidéo de fond dans le bloc bleu

    Réponse
    • Jean - netologiste.com

      Bonjour,
      Vous pouvez chercher du côté du paramètre « loop »
      Bon courage

      Réponse
  9. Francois

    Un grand merci pour ces infos! Ça fonctionne très bien 🙂

    Réponse
    • Jean - netologiste.com

      Merci pour le retour, content que ça ait pu vous aider !
      Aussi, les ressources principales sont ici, si vous n’avez pas jeté un oeil : https://app.netologiste.com/

      Réponse
  10. Jacques Dupuis

    Bonjour Jean,
    Merci pour vos explications, peut-on faire démarrer un audio automatiquement
    Bon week-end
    Jacques

    Réponse
    • Jean - netologiste.com

      Bonjour Jacques,
      Même chose que pour les vidéos : l’autoplay est strictement déconseillé, voire illégal, et bloqué par le navigateur dans de nombreux cas
      Pour essayer, mettre autostart=true sur le embed du mp3
      Bon week-end!

      Réponse
      • Jacques Dupuis

        Bonjour Jean,
        Merci de votre réponse et à bientôt
        Jacques

        Réponse
  11. Richez Mathéo

    Comment enlever les boutons du lecteur ?
    Je parle du play, du volume, du bouton plein écran, etc

    Merci !

    Réponse
    • Jean - netologiste.com

      Bonjour,
      L’article a été mis à jour avec ces informations pour enlever les boutons du lecteur :
      controls=0 pour une vidéo YouTube
      removeAttr(‘controls’) pour un module vidéo Divi
      Cordialement

      Réponse
  12. antoniucci

    ça marche mais pas sur mobile (démarrage direct)
    Avez vous une aide ?
    merci

    Réponse
    • Jean - netologiste.com

      Vous avez bien coupé le son de la vidéo ?

      Réponse
      • Jochen Ravache

        Bonjour,
        Même problème, cela ne se lance pas directement sur mobile. Avez vous une aide ? Merci

        Réponse
  13. Faure

    Bonjour. Super Tuto
    SI on ne veux garder que le gros bouton play au milieu de la vidéo et supprimer la barre des controls, vous avez une astuce ?

    Bien à vous

    Réponse
    • Jean - netologiste.com

      Bonjour,
      Vous pouvez essayer controls=0

      Réponse
  14. Fred

    Bonjour,
    je travail actuellement sur un site conçu avec Divi4 et sur lequel 2 vidéos sont présentes sur une OnePage. les vidéos sont uploadées dans les médias de mon WP et sont importées dans un « FOND » de bloc (Paramètre du bloc/Fond/Image-vidéo).
    Mon soucis est que les vidéos importées ne sont visible que sur le navigateur Safari.
    Impossible de les voir sur Chrome ou Firefox…
    Quelqu’un à une idée ?

    L’adresse temporaire du site :
    https://ddd-securite.com/9-2?et_fb=1&PageSpeed=off/
    (> Utiliser Safari pour voir la vidéo)

    WordPress version 5.8

    Réponse
    • Jean - netologiste.com

      Bonjour Fred, vous avez bien mute (mis en sourdine) les vidéos ? Uploadé plusieurs formats pour chaque, mp4, webm ? Mis à jour Divi ?
      Il vous suffit de contacter le support technique d’Elegant Themes dans ces cas-là

      Réponse
  15. Vince

    Bonjour et merci pour cet article très détaillé !
    Toutefois, est-ce que cela fonctionne si la video est intégrée dans l’arrière plan de section? Il suffit d’ajouter un module de code dans la ligne ?
    Merci par avance.

    Réponse
    • Michaux

      Bonjour, avez-vous trouvé la solution? J’ai également mis une vidéo en fond de section, celle-ci démarre automatiquement et est en mode loop automatiquement, je n’ai rien codé pour ces deux attributs, cependant je n’ai pas la possibilité d’avoir le son sur ma vidéo ni les contrôles (play ou pause). Quelqu’un aurait-il une solution?

      Merci d’avance.

      Réponse
    • Jean - netologiste.com

      Bonjour, par définition, une vidéo de fond n’a pas de contrôles, donc elle est en autoplay et en sourdine. Si vous regardez le code créé par Divi lorsqu’on met une vidéo en fond, il ressemble à : video loop autoplay playsinline muted
      Forcer à remettre le son (enlever le « mute ») est possible en Javascript, mais dans ce cas, les navigateurs bloqueront l’autoplay, puisqu’une vidéo en autoplay avec du son est interdite dans la plupart des cas. J’ai mis l’article à jour avec ces infos.

      Réponse
  16. Jochen

    Bonjour,

    La vidéo se lance bien automatique sur version desktop mais pas sur mobile. Savez-vous pourquoi ?
    Voici la vidéo en question sur la page d »accueil : https://versus-saint-barth.com/

    Merci

    Réponse
    • Jean - netologiste.com

      Bonjour Jochen, la vidéo de votre site versus-saint-barth.com se lance bien directement toute seule sur mon mobile. Comme expliqué dans l’article, les navigateurs utilisent de nombreux critères pour décider de bloquer ou non un autoplay, donc a priori vous l’avez bien fait, mais ça sera toujours bloqué à certains endroits

      Réponse

Trackbacks/Pingbacks

  1. Divi video autoplay : lancer la vidéo au chargement de la page - Neosama Consulting - […] le tuto complet pour lancer des vidéos en autoplay avec YouTube, mp4, Divi ou […]

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Besoin d’aide personnalisée ?

Recevez de l’aide directement sur votre site : lors d’un appel Zoom avec partage d’écran, je travaillerais avec vous sur votre site.

Pratiquez à votre rythme avec les formations en ligne

Formation WordPress

Apprendre WordPress

Comprenez WordPress de A à Z : formation complète en vidéo pour tout apprendre de WordPress.

Formation Découvrir Divi

Découvrir Divi

Créez votre site Web sans faire de code grâce au constructeur visuel Divi.

Formation Mieux utiliser Divi

Mieux utiliser Divi

Mon expérience après avoir aidé des dizaines d'entreprises à améliorer leur site Web Divi.

Formation Hébergement

Guide hébergement

Un hébergement Web avec votre installation de WordPress dès aujourd’hui.

Formation Divi Intégration Web

Divi intégration Web

Création d'une page Web complexe à partir d'une maquette graphique.

Obtenez ma formation Divi gratuitement

Recevez ma formation Divi gratuite avec des astuces pour vous simplifier le quotidien.

Vous allez recevoir un email à l'adresse que vous avez indiqué.