Nativement, le Divi Builder propose d’ajouter une vidéo en fond de section, ligne ou module.
Mais le fichier vidéo doit être hébergé dans la bibliothèque de médias de WordPress, sur le serveur du site concerné.
Non seulement un fichier vidéo occupe plus d’espace disque qu’une image – sans compter qu’il faut utiliser 2 formats de fichiers différents (.mp4 et .webm) pour maximiser la compatibilité d’un navigateur à l’autre – mais il consomme des ressources serveur à chaque fois qu’il est lu.
La solution est donc d’héberger sa vidéo sur un site de partage tel que YouTube. Bon nombre d’utilisateurs de Divi se sont un jour demandé comment faire cela…
Dans ce tutoriel, fruit de longues heures de recherches et de tests, je vais donc vous présenter, non pas une, mais deux méthodes pour afficher une vidéo YouTube en fond de n’importe quel élément de Divi.

Avant-propos

Gardez toujours à l’esprit qu’utiliser des vidéos de fond sur votre site aura un impact sur les performances de celui-ci. N’en abusez pas, sous peine de voir s’effondrer votre score lors des tests de vitesse.
De plus, par convention, les vidéos de fond sont inactives sur appareils mobiles, ceci afin d’économiser de la bande passante.

Méthode 1 : utilisez un plugin jQuery

Avant de commencer, veuillez noter que cette méthode nécessite l’utilisation d’un thème enfant, et ce afin de charger les fichiers JavaScript nécessaires de la manière la plus adéquate possible.
Si vous n’avez pas de thème enfant, vous pouvez télécharger gratuitement le thème enfant de Divi Community.
Et si vous voulez en savoir plus sur les thèmes enfants, je vous invite à lire notre article Tout savoir sur les thèmes enfants pour Divi.

Téléchargez Vidbacking.js

Comme indiquez en titre de chapitre, nous allons utiliser un plugin jQuery nommé Vidbacking.js.
Celui-ci est extrêmement léger : le fichier JavaScript minifié pèse moins de 4 Ko et vous allez voir qu’il n’y a besoin d’ajouter que quelques dizaines de lignes de CSS en complément.
Je vous invite donc à vous rendre sur le dépôt Github du plugin en cliquant sur le bouton ci-dessous.

Sur la page Github du plugin, comme vous pouvez le voir sur la capture d’écran ci-dessus, cliquez sur le bouton vert Clone or download puis sur Download ZIP pour télécharger l’archive complète.

Dézippez ensuite le fichier vidbacking-master.zip et mettez de côté les fichiers jquery.vidbacking.css et jquery.vidbacking.min.js situés dans le dossier dist.
Le reste ne nous servira pas.

Installez Vidbacking.js

Ajoutez Vidbacking.js à votre thème enfant

Connectez-vous au serveur FTP de votre site et rendez-vous dans le répertoire de votre thème enfant.
Pour une question d’organisation, je conseille généralement d’y créer un sous-dossier js dans lequel vous pourrez déposer les divers fichiers JavaScript dont vous aurez besoin pour votre site.
Ceci fait, uploadez dans ce dossier js le fichier jquery.vidbacking.min.js.

Déclarez votre fichier JavaScript

Il faut maintenant appeler le plugin Vidbacking.js sur la ou les pages de votre site où vous désirez ajouter un fond vidéo.

Pour ce faire, ouvrez le fichier functions.php de votre thème enfant et ajoutez les lignes suivantes, que vous pourrez modifier selon vos besoins en fonction des précisions que je vais vous donner juste après.

Détaillons ce code :

• Ligne 1 : ne copiez pas cette ligne, j’ai ajouté <?php dans mon exemple uniquement pour activer la coloration syntaxique du bloc de code
• Ligne 3 : j’ai mis une condition pour ne charger le plugin que sur la page de mon choix.
  • Si vous pensez ajouter des fonds de vidéos YouTube sur la majorité des pages de votre site, supprimez les lignes 3 et 5
  • Si vous voulez charger le plugin sur plusieurs pages bien précises, il vous suffit de préciser leur nom (le slug) entre guillemets et séparés par des virgules : ‘page-machin’, ‘page-bidule’. Vous pouvez aussi utiliser leurs IDs : ’42’, ’25’
• Ligne 4 : le chemin d’accès au fichier de Vidbacking.js

Ajoutez les CSS

Souvenez-vous, tout à l’heure vous avez mis de côté un fichier nommé jquery.vidbacking.css. Il contient les règles CSS qui permettront de positionner correctement le lecteur vidéo dans l’élément sur lequel vous voudrez ajouter votre vidéo YouTube de fond.

Ouvrez donc ce fichier et copiez-collez les CSS qu’il contient dans le fichier style.css de votre thème enfant.

Nous allons juste procéder à 2 petites modifications pour adapter le plugin à Divi :

• repérez la classe .vidbacking-active-block-back-youtube et passez la valeur du z-index à 0 (au lieu de -100)
  Ceci permettra d’ajouter à notre élément une image de fond qui s’affichera sous la vidéo. Ainsi, si cette dernière ne s’affiche pas (sur mobiles par exemple), l’image de fond sera tout de même présente
• ajoutez les quelques lignes ci-dessous pour affiner le positionnement du lecteur vidéo

Balisez l’élément qui bénéficiera du fond vidéo

Rendez-vous maintenant sur la page sur laquelle vous souhaitez ajouter une vidéo YouTube en fond, activez le Divi Builder et attribuez-lui l’identifiant CSS video-back.
Pour rappel, pour cela il faut afficher les paramètres d’une section, d’une ligne ou d’un module et aller dans Avancé -> ID et Classes CSS -> ID CSS.

Notez que vous pouvez choisir une section, une ligne (dans son intégralité ou juste une colonne), un module… pour ajouter votre fond vidéo YouTube.

Comme je vous le disais un peu plus haut, profitez-en pour ajouter à votre élément une image de fond qui s’affichera si la vidéo n’apparait pas.
Ça vous permet aussi de voir ce que vous faites quand vous travaillez sur votre mise en page car la vidéo est invisible tant que le Divi Builder est actif.

Configurez votre vidéo de fond YouTube

Dernière étape, mais non la moindre, ajouter le script jQuery qui permettra d’appliquer Vidbacking.js à l’élément que vous aurez ciblé.
Pour ce faire, ajoutez où vous le souhaitez dans votre page, un module Code avec le contenu suivant :

Vous n’avez qu’à modifier à la ligne 3 :

• l’identifiant de votre vidéo YouTube dans la balise src : soit oLbNS3mAIB0 dans mon exemple
• si besoin, les valeurs de width et height dans le cas où votre vidéo n’aurait pas les mêmes proportions que dans mon exemple

Sauvegardez maintenant les changements effectués sur votre page et vous verrez s’afficher votre vidéo YouTube en fond de l’élément que vous avez choisi.

Méthode 2 : utilisez un plugin WordPress

Si vous n’avez besoin d’ajouter votre vidéo YouTube qu’en fond de section et n’avez pas envie de mettre les mains dans le code, vous pouvez télécharger la version gratuite du plugin Divi Section Enhancer qui est disponible sur le dépôt de WordPress.org.

À l’heure où j’écris ces lignes, Divi Section Enhancer propose 13 effets et modifications à appliquer aux sections :

• dans sa version gratuite :
  • scrollbar section
  • tilt effect
  • YouTube background (c’est ce qui va nous intéresser)
  • sidebar (off canvas)
  • particles background
• dans sa version premium
  • pro particles background
  • stacks
  • tilted sections
  • waterpipe background
  • geometry angle background
  • stars warp background
  • sparkles
  • scrollify section

Si vous voulez en savoir plus sur Divi Section Enhancer, voir des démos et acquérir la version premium (environ 22,50 €), je vous invite à visiter le site du plugin.

Comment utiliser Divi Section Enhancer

Une fois le plugin installé et activé, ouvrez les paramètres d’une section et rendez-vous dans Avancé -> Personnaliser CSS.
Après le dernier champ d’ajout de CSS personnalisées, vous verrez une nouvelle option avec une liste sélective, dans laquelle vous choisirez Youtube Background.

Vous remarquerez l’information concernant le fait que vos changements ne seront pas visibles en live dans le Visual Builder, mais uniquement lorsque vous l’aurez quitté.
Sachez que ceci est dû aux limitations imposées par l’API d’Elegant Themes. À l’heure actuelle, il est impossible d’apporter des modifications à un élément existant de Divi et d’obtenir un rendu en direct.

Une information qui m’a été confirmée par le développeur de Divi Section Enhancer ainsi que par des membres de l’équipe d’Elegant Themes.

Paramétrez votre fond vidéo YouTube dans Divi Section Enhancer

Voici comment effectuer vos réglages pour afficher votre vidéo YouTube.

• Activate Youtube Background on this section
  (Activer le fond YouTube sur cette section)
  Sélectionnez Yes
• Youtube Video ID
  (ID de la vidéo YouTube)
  Saisissez l’identifiant de votre vidéo. Si je reprends mon exemple, ce sera oLbNS3mAIB0
• Activate Sound
  (Activer le son)
  Je vous conseille de choisir No pour ne pas incommoder vos visiteurs
• Repeat Video
  (Répéter la vidéo)
  Le plus logique est de choisir Yes pour jouer la vidéo en boucle
• Video Ratio
  (Ratio de la vidéo)
  Vous avez le choix entre 16/9 et 4/3. Tout dépendra de votre vidéo, mais dans la majorité des cas, ce sera du 16/9
• Video width
  (Largeur de la vidéo)
  Vous avez le choix entre :
  • Use adaptative width (recommended) pour que la largeur de la vidéo s’adapte à la largeur de la section. C’est en effet le choix le plus logique
  • Use default width pour que la vidéo s’affiche selon sa largeur initiale
• Video height
  (Hauteur de la vidéo)
  Vous avez le choix entre :
  • Original pour conserver la hauteur initiale de la vidéo
  • Increased pour augmenter la hauteur de la vidéo en proportion avec sa largeur selon le ratio choisi. C’est le choix qui convient le mieux
  • Fit to Section Height pour ajuster la hauteur de la vidéo à la hauteur de la section
• Activate Parallax Effect
  (Activer l’effet parallaxe)
  Vous avez le choix entre Yes, No et Only Mobile mais en ce qui me concerne, je ne vois pas l’effet s’appliquer, quelle que soit l’option sélectionnée…
• Hide Top
  (Masquer le haut)
  Par défaut, une valeur de -200px est déjà entrée afin de masquer l’en-tête de la vidéo YouTube. Si besoin, vous pouvez donc modifier cette valeur
• Start Time et End Time
  (Timing de début et timing de fin)
  Saisissez un chiffre qui signifiera à quelle seconde commencera la vidéo et à quelle seconde elle se terminera. Ainsi, vous pouvez choisir de ne diffuser qu’un extrait de la vidéo YouTube sélectionnée

Pour conclure

Dans cet article, je vous ai donc présenté 2 solutions bien différentes pour ajouter des vidéos YouTube en fond de vos éléments Divi.
À vous de voir maintenant laquelle convient le mieux à vos besoins.
Sachant que la version jQuery à l’avantage d’autoriser l’intégration de vidéos en fond de n’importe quel élément de Divi ; et pas seulement en fond de section comme le propose Divi Section Enhancer.
Néanmoins, ce dernier apporte d’autres effets qui pourraient vous intéresser afin d’enjoliver votre site Divi.

Partager