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&amp;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.