Sélectionner une page

Dans ce tutoriel, je vais partager les étapes pour mettre en lecture automatique (autoplay) le module vidéo de Divi et cacher les contrôles sur la vidéo.

Avant de commencer le tutoriel, il est important de savoir qu’il n’est pas possible de lire automatiquement des vidéos avec du son. Les navigateurs bloqueront le chargement de la vidéo si vous essayez de la lire sans le son. Vous pouvez en savoir plus sur la politique de Google en matière de lecture automatique en cliquant sur ce lien.

Il convient également de noter que le code de lecture automatique ne fonctionne que pour les vidéos hébergées par vous-même. Il ne fonctionnera pas pour les lecteurs vidéo tiers tels que YouTube ou Vimeo, c’est une autre méthode.

Allons y maintenant.

1. Ajouter une classe CSS au module vidéo

La première chose que vous devez faire est d’ajouter une classe CSS personnalisée au module vidéo. Ceci afin que le code n’affecte pas tous les modules vidéo de votre site Web.

Vous pouvez ajouter la classe CSS dans les paramètres du Module vidéo > Avancé > ID et classes CSS > Classe CSS. Pour ce tutoriel, nous allons ajouter la classe rc-video-autoplay.

Voici une capture d’écran pour vous aider à comprendre où ajouter la classe CSS dans les paramètres du module vidéo.

Comment mettre en lecture automatique le module vidéo de Divi

2. Ajouter le code jQuery pour la lecture automatique des vidéos dans les options du thème

Ensuite, vous devez ajouter le code ci-dessous dans le Tableau de bord de WordPress > Options du thème > Intégration > Ajouter le code dans le <head> de votre blog.

Si vous ne savez pas où ajouter le code, voici une capture d’écran pour vous aider :

Comment mettre en lecture automatique le module vidéo de Divi 1

[pastacode lang= »javascript » manual= »%3Cscript%3E%0AjQuery(document).ready(function()%20%7B%0Aif%20(jQuery(‘.rc-video-autoplay%20.et_pb_video_box’).length%20!%3D%3D%200)%20%7B%0AjQuery(‘.rc-video-autoplay%20.et_pb_video_box’).find(‘video’).prop(‘muted’%2C%20true)%3B%0AjQuery(‘.rc-video-autoplay%20.et_pb_video_box’).find(‘video’).attr(‘loop’%2C%20’loop’)%3B%0AjQuery(‘.rc-video-autoplay%20.et_pb_video_box’).find(‘video’).attr(‘playsInline’%2C%20 »)%3B%0A%0AjQuery(‘.rc-video-autoplay%20.et_pb_video_box’).each(function()%20%7B%0AjQuery(this).find(‘video’).get(0).play()%3B%0A%7D)%3B%0AjQuery(‘.rc-video-autoplay%20.et_pb_video_box’).find(‘video’).removeAttr(‘controls’)%3B%0A%7D%0A%7D)%3B%0A%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

 

Voilà, c’est fait. Maintenant, tous les modules vidéo de votre site Web qui ont la classe rc-video-autoplay feront une lecture automatique de la vidéo sur votre site Web.

Le code ci-dessus coupe le son de la vidéo, la met en boucle et masque les contrôles. Si vous voulez désactiver le bouclage de la vidéo, vous pouvez supprimer la ligne 5 du code :

[pastacode lang= »javascript » manual= »jQuery(%22.lwp-video-autoplay%20.et_pb_video_box%22).find(‘video’).attr(‘loop’%2C%20’loop’)%20%3B » message= » » highlight= » » provider= »manual »/]

Si vous voulez afficher des contrôles sur la vidéo, vous devez supprimer la ligne 11 du code :

[pastacode lang= »javascript » manual= »jQuery(‘.lwp-video-autoplay%20.et_pb_video_box’).find(‘video’).removeAttr(‘controls’)%20%3B » message= » » highlight= » » provider= »manual »/]

Et si vous ne souhaitez pas que l’on puisse télécharger la vidéo (si les contrôles sont affichés) :

[pastacode lang= »javascript » manual= »jQuery(‘.rc-video-autoplay%20.et_pb_video_box’).find(‘video’).attr(‘controlsList’%2C%20’nodownload’)%3B » message= » » highlight= » » provider= »manual »/]

Laissez un commentaire ci-dessous si vous avez trouvé cela utile ou si vous avez des questions. N’oubliez pas de vous inscrire à la newsletter pour recevoir mes derniers articles.

Sources

Florent Maillefaud

Comment mettre en lecture automatique le module vidéo de Divi 2Webmaster à Sablons (Isère) / Création de sites internet WordPress.

Micro-entrepreneur depuis 2012, je vous propose la création ou la refonte de votre site internet sous WordPress et à votre image.

Que ce soit un site vitrine, un blog ou un site e-commerce pour votre entreprise ou association, laissez votre empreinte sur le web !

Share This