Les explications ont été largement complétées et mises à jour le 19 janvier 2020, elles se trouvent dans la vidéo ci-dessus.
Divi vidéo autoplay : lancer une vidéo au chargement de la page
L’ajout de vidéos dans Divi
Divi propose un module vidéo 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 » :
Divi vidéo autoplay : démarrer automatiquement la vidéo
Pour que la vidéo démarre automatiquement au chargement de la page, sans que le visiteur ait besoin de cliquer sur « Play », il existe un petit code facile à mettre en oeuvre si vous avez des notions de base Web et Javascript.
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 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 » :
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) :
<script type="text/javascript"> jQuery(function() { jQuery('#mavideo .et_pb_video_box video').get(0).play(); }); </script>
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
Note : Cela fonctionne avec une vidéo mp4, mais pas avec une vidéo YouTube.
Jouer une vidéo en boucle avec Divi (loop)
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
Textes de la vidéo
comment on peut activer l’autoplay sur une vidéo dans un site Web, cad démarrer automatiquement la vidéo sans que le visiteur ait besoin de cliquer sur le bouton « Play » : dès qu’il 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
Mais 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 : je vous mets un lien qui explique ce qu’est Divi dans la description de la vidéo.
Titre : Intégrer une vidéo dans un site Web
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 », je vous mets le lien dans la description de cette vidéo.
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, ce qui donne :
https://www.youtube.com/embed/jKeqLCf0VcQ?start=6&autoplay=1
Si tout cela pour vous c’est du chinois ou du japonais, 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, je vous met le lien dans la description.
Voici ce que donne la vidéo sans le paramètre autoplay : vidéo qui ne se lance pas
Et avec le paramètre autoplay : vidéo qui se lance
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’explique cela plus loin dans la vidéo, restez jusqu’au bout.
Autoplay sur une vidéo YouTube 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
Lorsqu’on intègre une vidéo YouTube en cliquant sur :
- Ajouter module
- Vidéo
- Choix de la vidéo
- Insérer à partir d’une adresse Web
- C’est ici qu’on va vouloir mettre l’URL avec son paramètre autoplay
Comme tout à l’heure, si cela ne marche pas pour vous, il y a 2 causes possibles :
- soit vous avez fait une erreur dans l’ajout du paramètre à votre URL
- soit votre navigateur n’autorise pas l’autoplay sur les vidéos. J’explique cela dans quelques instants, restez jusqu’au bout.
Autoplay sur une vidéo .mp4 dans Divi
On ajoute une vidéo mp4 dans Divi en faisant :
- Ajouter module
- Vidéo
- Choix de la vidéo
- Sélection de la vidéo dans la bibliothèque de médias, si la vidéo est déjà dans les médias de votre site WordPress
ou - Téléverser des fichiers, si vous voulez envoyer la vidéo mp4 depuis votre ordinateur vers votre site WordPress
Ici nous n’avons pas la possibilité de mettre un paramètre URL autoplay tout simple, comme avec YouTube.
Ce qu’on va faire, c’est qu’on va ajouter un petit code Javascript qui va lancer la vidéo automatiquement.
Javascript, pour résumer simplement, c’est le langage de programmation qui va avec les sites Web et qui permet de programmer des actions.
Il existe différentes manières d’ajouter du Javascript à une page, nous allons utiliser la plus simple pour cet exemple, pour lancer la vidéo automatiquement.
En premier lieu, donnez un identifiant à votre module vidéo, dans l’onglet avancé du module, champ « ID CSS », et retenez cet identifiant. Ici j’ai mis « mavideo » (voir la vidéo)
Attention, vous ne pouvez pas utiliser d’espaces ou de caractères spéciaux dans cet identifiant : utilisez simplement des miniscules sans accents, éventuellement avec des tirets.
Ensuite, ajoutez un module Divi de code (voir la vidéo).
Dans le champ « Contenu » de ce module de code, ajoutez le code suivant :
<script type="text/javascript"> jQuery(function() { jQuery('#mavideo .et_pb_video_box video').get(0).play(); }); </script>
En remplacant « mavideo » par l’identifiant que vous avez donné à votre module vidéo.
Par exemple si vous avez nommé votre module vidéo : « videoduchat », remplacez « mavideo » par « videoduchat » dans le Javascript.
Aussi dans votre Javascript, pensez à laisser le dièse # avant l’identifiant.
Ici, on utilise jQuery (djay-qoueri), que je prononce à tort j-kouery : jQuery est une librairie Javascript qui facilite et étend le code Javascript. jQuery est déjà intégré dans WordPress, vous n’avez pas besoin de l’installer.
Je vous met le lien vers ce code à copier/coller dans la description de la vidéo, et je vous l’explique rapidement (voir la vidéo)
La balise HTML
mavideo .et_pb_video_box video .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, qui ici est la première occurence de la balise video
play() est la fonction qui lance la vidéo
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">
J’ai tout bien fait, mais ça ne marche 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 2 mèmes à ce sujet :
« I will find you, and I will pause you »
C’est assez intéressant de comprendre cette image, car elle résume à elle seule les mesures de bloquage de l’autoplay mises en place par les éditeurs des navigateurs Web.
Dans cette image, on voit Liam Neeson, le héro du film « Taken », dans lequel sa fille se fait kidnapper.
Il arrive à avoir le kidnappeur au téléphone, et il lui fait le speech suivant, qui est devenu viral :
« I don’t know who you are. I don’t know what you want. If you are looking for ransom I can tell you I don’t have money, but what I do have are a very particular set of skills. Skills I have acquired over a very long career. Skills that make me a nightmare for people like you. If you let my daughter go now, that’ll be the end of it. I will not look for you, I will not pursue you, but if you don’t, I will look for you, I will find you and I will kill you. »
Si vous cherchez une rançon, je peux vous dire que je n’ai pas d’argent, mais ce que j’ai, c’est un ensemble de compétences très particulier. Compétences que j’ai acquises au cours d’une très longue carrière. Des compétences qui font de moi un cauchemar pour des gens comme vous. Si vous laissez ma fille partir maintenant, ce sera la fin. Je ne te chercherai pas, je ne te poursuivrai pas, mais si tu ne le fais pas, je te chercherai, je te trouverai et je te tuerai.
En gros, il n’a rien demandé à personne, mais sa fille s’est faîte kidnapper, et il va tout faire pour la retrouver et tuer le kidnappeur.
Le parralèlle qui est fait ici, est que parfois il y a du son qui se lance dans notre navigateur Web, sans qu’on ait rien demandé, et on ne sait pas d’où il vient.
Peut-être que vous avez déjà vécu cette situation, c’est très perturbant : on se met à chercher partout d’où vient ce son, on cherche dans chaque onglet, on défile dans les pages, on cherche la vidéo pour l’arrêter.
Cette phrase « I will find you, and I will pause you » donne en français : « je vais te trouver, et je vais te mettre en pause »
Ce premier mème illustre l’agacement des vidéos qui se lancent toutes seules avec le son, pour justifier le fait que les navigateurs n’autorisent plus toujours l’autoplay des vidéos.
Dans le deuxième mème, c’est Boromir, du film Lord of the rings, le seigneur des anneaux, qui dit :
« One Does Not Simply autoplay videos »
Dans la conversation du film à laquelle ce mème fait référence, quelqu’un dit « Il faut emmener l’anneau au Mordor »
Dans le film, le Mordor c’est le territoire des méchants.
Et Boromir répond :
« One does not simply walk into Mordor. Its black gates are guarded by more than just orcs. There is evil there that does not sleep. The great eye is ever watchful. It is a barren wasteland, riddled with fire, ash, and dust. The very air you breathe is a poisonous fume. Not with ten thousand men could you do this. It is folly. »
On entre pas si facilement en Mordor, ses portes noires ne sont pas gardées que par des orques, en ces lieux il y a un mal qui ne dort jamais, et le grand oeil est toujours attentif, c’est une terre dévastée et stérile, recouverte de braises, de cendres et de poussière, l’air que l’on y respire n’est que vapeur empoisonnée. Même dix mille hommes n’en viendraient pas à bout, c’est une folie.
Cette phrase : « One Does Not Simply Walk into Mordor »
Est devenu un mème, pour illustrer quelque chose qu’on ne peut pas faire, ou qui est difficile à faire.
Par exemple si je dis : « Vous n’avez qu’à quitter votre emploi salarié, créer votre entreprise, et aller vivre où vous voulez n’importe où dans le monde »
On pourrait répondre « One does not simply quit his job »
Dans l’utilisation qui en est faîte ici, c’est ambigu, ça peut vouloir dire :
- On ne lance pas de vidéos en autoplay, tout simplement
ou - Ce n’est pas simple de lancer des vidéos en autoplay
Et effectivement, ce n’est pas simple de lancer des vidéos en autoplay, lorsqu’on lit les explications qui suivent :
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 est autorisé, cad sans son, avec le son désactivé par défaut
- L’autoplay de vidéos avec le son activé est autorisé si :
— L’utilisateur a intéragi 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
Je vous laisse vous amuser avec ces explications, 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
Et maintenant, voici les explications pour lancer la vidéo sans le son
Lancer une vidéo youTube sans le son
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>
Modifier notre code Javascript pour intégrer la vidéo mp4 sans le son 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>
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
Vidéo autoplay avec slider vidéo (curseur de défilement vidéo)
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(). Revenez de temps en temps ici pour voir si j’ai mis à jour cette partie.
« 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.
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