Les explications de cet article ont été complétées et revues en janvier 2020 puis en octobre 2023.
- Lancer une vidéo au chargement de la page : introduction
- Intégrer une vidéo YouTube dans un site Web en général (WordPress ou non)
- Activer l'autoplay
- J'ai tout bien fait, mais la vidéo ne se lance pas …
- Lancer une vidéo YouTube sans le son (sourdine)
- WordPress : lancer une vidéo en autoplay dans un bloc Gutenberg
- L'ajout de vidéos dans Divi
- Lancer la vidéo en autoplay avec un module vidéo Divi
- Lancer la vidéo en autoplay avec un module code Divi
- Jouer une vidéo en boucle (loop) avec une intégration YouTube HTML
- Cacher les boutons contrôles d'une vidéo YouTube
- Enlever les suggestions de vidéos à la fin de votre propre vidéo
- Cacher, enlever ou supprimer le logo YouTube d'une vidéo
- Autres paramètres YouTube
- Démarrer automatiquement une vidéo intégrée en MP4 dans Gutenberg
- Divi vidéo autoplay : démarrer automatiquement une vidéo MP4 – méthode Javascript
- Modifier notre code Javascript pour couper le son de la vidéo mp4 au démarrage
- Jouer une vidéo en boucle avec Divi (loop) – méthode Javascript
- Cacher les boutons contrôles d'une vidéo Divi – méthode Javascript
- Et en HTML ?
- Vidéo autoplay avec slider vidéo (curseur de défilement vidéo) – méthode Javascript
- Vidéo autoplay en fond de section (background video)
- Peut-on utiliser cet autoplay avec d'autres builders comme Oxygen, Elementor, Beaver Builder, Brizy, WP Bakery, Visual Composer ?
- "Je n'y arrive toujours pas …" ?
- Mise à jour avril 2021 : vers une interdiction de la lecture automatique des vidéos en France
- 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 :
Vous pouvez choisir d’intégrer une vidéo externe, comme une vidéo YouTube, en choisissant « Insérer à partir d’une adresse web » :
Ou bien de téléverser votre propre vidéo, en choisissant « .MP4 URL de la vidéo » ou le format « WEBM » :
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 :
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 :
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 :
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
Bonsoir,
Il y a un soucis dans votre page.
L’info est manquante. On a:
1
Bonsoir, le code a été reparé
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 !
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
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!
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
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 !
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))
Super, ça fonctionne à merveille en autoplay et mute!!!
Merci Jean!
Merci François !
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 !!
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()
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′);
}
Bonjour,
Merci pour votre retour positif
Si ça fonctionne partout sauf sur Safari iPhone, c’est que le problème vient de l’Iphone en général ou de Safari version iPhone, je ne connais pas l’iPhone
Il y a des infos ici :
https://developer.apple.com/documentation/webkit/safari_tools_and_features/delivering_video_content_for_safari
Bon courage
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
Bonjour,
Vous pouvez chercher du côté du paramètre « loop »
Bon courage
Un grand merci pour ces infos! Ça fonctionne très bien 🙂
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/
Bonjour Jean,
Merci pour vos explications, peut-on faire démarrer un audio automatiquement
Bon week-end
Jacques
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!
Bonjour Jean,
Merci de votre réponse et à bientôt
Jacques
Comment enlever les boutons du lecteur ?
Je parle du play, du volume, du bouton plein écran, etc
Merci !
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
ça marche mais pas sur mobile (démarrage direct)
Avez vous une aide ?
merci
Vous avez bien coupé le son de la vidéo ?
Bonjour,
Même problème, cela ne se lance pas directement sur mobile. Avez vous une aide ? Merci
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
Bonjour,
Vous pouvez essayer controls=0
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
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à
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.
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.
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.
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
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