Guide ultime d'utilisation de la vidéo avec Divi

La vidéo est un outil puissant. Si une image vaut mille mots, alors une minute de vidéo vaut 1,8 million de mots (c'est du moins ce que suggère le chercheur Dr James McQuivey). La vidéo est un outil de marketing efficace et, lorsqu'elle est bien faite, un instrument pour un beau design.

Ajouter une vidéo à votre site web est facile avec Divi. Les modules de curseur vidéo et vidéo vous permettent d'ajouter des vidéos hébergées par des tiers comme youtube et vimeo en entrant simplement l'URL de la vidéo. Vous pouvez même ajouter vos propres vidéos personnalisées aux formats mp4 et webm pour une compatibilité maximale avec les navigateurs. Pour couronner le tout, Divi vous offre la possibilité de styliser vos vidéos avec des superpositions d'images et des boutons de lecture pour vous aider à faire correspondre la conception de votre site.

En plus d'intégrer des vidéos sur votre page, Divi propose également une solution simple pour ajouter des vidéos d'arrière-plan. Actuellement, lorsque vous créez un site avec le constructeur Divi, chaque section, ligne, colonne et 20 modules sur 37 ont une capacité de vidéo d'arrière-plan.

Pour la plupart des gens, utiliser la vidéo dans Divi est aussi simple que d'insérer le lien vers la vidéo YouTube ou Vimeo de votre choix et de la voir apparaître sur votre publication ou votre page. Mais dans cet article, nous allons parler de comment et pourquoi Divi fait ce qu'il fait avec la vidéo afin que vous soyez entièrement équipé pour tous les cas d'utilisation spéciaux, styles uniques ou expériences créatives que vous pourriez vouloir exécuter.

Dans ce guide, nous allons discuter…

• les coulisses du fonctionnement du module vidéo et du module de curseur vidéo afin que vous puissiez l'utiliser plus efficacement.
• la différence entre l'auto-hébergement de vos vidéos et l'utilisation d'un hébergeur tiers.
• quelques conseils pour optimiser vos vidéos pour le Web.
• meilleures pratiques pour les arrière-plans vidéo.
• un guide général pour le choix des dimensions de la vidéo.
• et quelques astuces utiles pour les vidéos d'arrière-plan.

Commençons.

Explorer le module vidéo

Le module vidéo vous permet d'intégrer des vidéos sur votre page à partir de n'importe quelle source. La documentation de Divi sur le module vidéo explique toutes les fonctionnalités et comment ajouter une vidéo à votre page. Mais pour ce post, je vais creuser un peu plus.

Ajout d'une vidéo auto-hébergée au module vidéo

Pour ajouter une vidéo auto-hébergée avec le module vidéo, vous devez télécharger une vidéo ou ajouter une URL au fichier vidéo dans les paramètres vidéo. Et, vous devez ajouter votre vidéo dans deux formats de fichier.

Et c'est tout ce que vous devez vraiment faire. Assez simple.

Cependant, dans les coulisses, Divi utilise l'élément vidéo HTML5 pour afficher la vidéo. Lorsque vous choisissez d'ajouter une vidéo auto-hébergée ou de télécharger votre propre vidéo aux formats mp4 et webm, la structure du code déployé par Divi ressemble à ceci :

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
Error loading this resource
</video>

Voici quelques points que je veux souligner à propos de ce que fait ce code :

1. Notez l'attribut control dans la balise <video>. Cela indique à la vidéo d'afficher les commandes. Assez simple.
2. Notez les deux balises <source> dans les balises d'ouverture et de fermeture <video>. Les sources sont constituées de fichiers vidéo. Le premier est un mp4 et le second est un format de fichier webm. Les deux sont nécessaires pour une prise en charge maximale du navigateur. L'ordre est également important. Vous voulez que le navigateur voie le mp4 en premier car c'est le plus universellement pris en charge. Je discuterai plus en détail de ces formats plus tard.
3. La ligne indiquant « Erreur lors du chargement de cette ressource » sera affichée si les deux premiers formats ne sont pas reconnus.
4. Ce que vous ne pouvez pas voir, c'est que Divi a stylisé cette balise <video> et lui a donné une largeur de 100% pour la rendre réactive afin que votre vidéo s'ajuste à la largeur de la colonne dans laquelle elle se trouve.

Cet élément vidéo HTML5 est en train de devenir le nouveau moyen standard d'afficher des vidéos sur le Web. Heureusement, Divi s'en occupe pour nous.

Superposition d'images vidéo auto-hébergées

Outre la possibilité d'ajouter vos vidéos au module vidéo, Divi vous permet également d'ajouter une image de superposition personnalisée pour votre vidéo.

Si vous choisissez d'ajouter une image de superposition à votre vidéo auto-hébergée, vous devez télécharger la vôtre. L'option de générer l'image à partir d'une vidéo ne s'applique qu'aux URL de vidéo hébergées par des tiers comme Youtube et Vimeo.

Parce que l'image deviendra la taille de la vidéo et parce que la vidéo s'ajustera à la taille de la colonne dans laquelle elle se trouve, il est important de choisir la bonne taille d'image. Les vidéos de Youtube, Vimeo et de la plupart des autres formats ont généralement un rapport hauteur/largeur de 16:9. Donc, si vous avez défini la largeur maximale de votre contenu sur la valeur par défaut de Divi de 1080px, alors en suivant le format d'image 16:9, votre vidéo aura les dimensions de 1080×608. Par conséquent, votre image de superposition doit être de 1080 × 608 pixels.

Le bouton de lecture

Une fois votre image paramétrée, Divi appliquera automatiquement un bouton de lecture personnalisé. Vous pouvez même changer la couleur du bouton si vous le souhaitez dans les paramètres vidéo sous l'onglet Conception.

Une fois que l'utilisateur a cliqué sur la superposition avec le bouton de lecture personnalisé, la superposition et le bouton disparaîtront et la vidéo sous la superposition commencera à jouer automatiquement.

Ajout d'une URL de vidéo hébergée par un tiers

La méthode la plus courante pour ajouter une vidéo au module vidéo consiste simplement à ajouter l'URL d'une vidéo hébergée par un tiers comme Youtube ou Vimeo. Ainsi, au lieu d'ajouter les deux formats vidéo comme vous le feriez pour les vidéos auto-hébergées, vous ajouteriez simplement une URL dans la barre de saisie supérieure en arrière-plan.

Dans les coulisses, Divi ajoute un div wrapper de largeur fluide et intègre un iframe affichant la vidéo. Cette iframe est la même que celle que vous obtiendriez directement de YouTube. Voici un exemple de ce à quoi ressemble le code lors de l'ajout d'une vidéo youtube avec le module vidéo :

<div class="fluid-width-video-wrapper" style="padding-top: 56.2963%;">
<iframe src="https://www.youtube.com/embed/Nimdf3Zeayk?autoplay=1&amp;amp;feature=oembed&amp;amp;wmode=opaque" frameborder="0" allowfullscreen="" id="fitvid0">
</iframe>
</div>

Le div avec la classe "fluid-width-video-wrapper" s'enroule autour de l'iframe et lui donne une largeur de 100% afin qu'il s'adapte à la largeur de son conteneur, le rendant réactif.

Si vous choisissez d'ajouter une image superposée, vous pouvez choisir de télécharger la vôtre ou, pour éviter un petit mal de tête, vous pouvez simplement cliquer sur « générer à partir de la vidéo » et Divi appliquera automatiquement une image superposée tirée de la vidéo. Vous pouvez également choisir de personnaliser le bouton de lecture.

Explorer le module de curseur vidéo

Le curseur vidéo fonctionne de manière très similaire au module vidéo dans la mesure où les vidéos sont déployées sur une page Web, sauf que maintenant les vidéos sont dans un curseur. C'est un moyen pratique d'afficher des vidéos à un seul endroit afin que vos utilisateurs puissent simplement faire défiler un groupe de vidéos une par une. Pour plus de détails sur les options du module de curseur vidéo, vous pouvez visiter la page de documentation.

L'un de mes éléments préférés du curseur vidéo est la piste de vignettes que vous pouvez utiliser pour contrôler les diapositives. C'est à la fois pratique et engageant.

Vous pouvez même personnaliser les couleurs des commandes du curseur à partir des paramètres du module, y compris la couleur de superposition des vignettes.

Les images miniatures conserveront la taille de l'image d'origine que vous téléchargez, alors veillez à ne pas télécharger un tas de grandes images dans votre curseur car cela pourrait ralentir votre site. De plus, les vignettes ne peuvent pas être générées automatiquement à partir de la vidéo. Vous devez les télécharger vous-même.

Les vignettes suivent un rapport hauteur/largeur de 4:3 afin d'ajuster vos images de curseur 16:9, elles exploseront et couperont la droite et la gauche de l'image afin de couvrir tout l'espace.

Astuce de conception : Une astuce que vous pouvez faire pour réduire la taille du fichier et empêcher vos vignettes de couper une partie de l'image est de personnaliser vos vignettes pour qu'elles soient de 253 × 190 pixels (un format 4:3) et de sélectionner l'option à masquer afficher des superpositions d'images sur la vidéo principale. De cette façon, vos images superposées ne seront utilisées que pour les vignettes et n'auront donc pas besoin d'être plus grandes pour s'adapter à la taille de la vidéo principale.

4 conseils importants pour l'auto-hébergement de vos vidéos

1. Utilisez un CDN. Si vous envisagez d'ajouter vos vidéos via la médiathèque WordPress, détrompez-vous. Bien qu'il soit possible d'héberger des vidéos sur votre propre installation WordPress sur votre propre serveur, vous rencontrerez probablement des limitations de bande passante, de taille de fichier, d'espace de stockage, etc. . J'envisagerais d'héberger vos vidéos sur un service externe comme Amazons3. Cela aidera avec les temps de chargement des pages. De plus, certains de ces fournisseurs offrent un niveau de sécurité pour empêcher les gens de télécharger vos vidéos (ou du moins rendre le téléchargement plus difficile).
2. Optimiser le fichier pour le Web. Les vidéos consomment beaucoup de bande passante, surtout lorsque vous utilisez un arrière-plan vidéo volumineux. Vous devrez faire attention à ne pas surcharger votre page. Il y a un certain nombre de facteurs à considérer si vous souhaitez optimiser correctement votre vidéo pour le Web. Voici une équation utile à considérer :
   taille du fichier = débit binaire (kilobits par seconde) x durée (durée de la vidéo en secondes)

   Ainsi, si vous souhaitez obtenir une taille de fichier plus petite, vous devrez réduire la durée (la longueur de la vidéo) et/ou le débit binaire (le nombre de kilobits par seconde transmis). Le débit doit toujours être inférieur à la vitesse de connexion de l'utilisateur. Étant donné que la vitesse Internet mondiale est d'environ 7 Mbps (les États-Unis sont d'environ 18 Mbps), vous voudrez garder le débit bien en dessous de celui-ci pour éviter une interruption du streaming.

   Vous n'êtes pas obligé de tout faire vous-même. Il existe d'excellents outils gratuits pour vous aider avec la compression vidéo comme Handbrake.

   Je vous suggère de lire « 5 meilleures façons de réduire la taille de la vidéo pour un chargement plus rapide » si vous souhaitez en savoir plus sur l'optimisation de vos vidéos pour le Web. Il existe d'excellentes ressources répertoriées et une excellente explication sur l'utilisation de Handbrake.

3. Ajouter des formats de fichiers corrects.
   Comme je l'ai mentionné précédemment, si vous hébergez vous-même vos vidéos (ne comptez pas sur un tiers pour l'héberger pour vous comme Youtube), vous devrez ajouter votre vidéo aux formats mp4 et webm.

   Mp4 est actuellement le format le plus largement pris en charge car il joue encore certains des anciens navigateurs utilisant flash et c'est la norme pour la prise en charge des navigateurs mobiles. Divi répertorie les mp4 en premier dans le code afin que les appareils iOS puissent reconnaître le fichier immédiatement.

   Webm est le deuxième format le plus pris en charge. Il a été conçu pour le Web et semble être là pour rester. Il produit un streaming de haute qualité avec une excellente compression. Et c'est open source.

   Combinés, ces deux offrent une prise en charge de la plupart des navigateurs Web, y compris les mobiles.

   Un excellent outil de conversion gratuit serait le lecteur multimédia VLC.

4. Définir les types MIME : Pour que le format vidéo WEBM fonctionne dans tous les navigateurs, votre serveur doit avoir les bons types MIME désignés. Vous pouvez en savoir plus sur l'utilisation de .htaccess pour définir les types MIME ici. Si vous remarquez que vos vidéos ne sont pas lues dans certains navigateurs, c'est probablement la raison. Pour ajouter des types MIME à votre fichier .htaccess, utilisez un client FTP (comme FileZilla) pour accéder à vos fichiers racine WordPress. Vous devriez y trouver votre fichier .htaccess. Ouvrez le fichier dans un éditeur de texte. Sous la ligne qui dit « #END WordPress », ajoutez ce qui suit :

   AjouterType vidéo/mp4 .mp4 .m4v
   AjouterType vidéo/ogg .ogv
   AjouterType vidéo/webm .webm

   

   Ensuite, enregistrez le fichier. Désormais, vos formats vidéo seront reconnus sur tous les navigateurs.

Hébergement avec des plateformes tierces (Youtube et Vimeo)

Si vous trouvez que convertir et compresser vos propres vidéos est tout simplement trop de travail, vous pouvez toujours laisser un tiers faire le travail pour vous.

Si vous ne connaissez rien à la vidéo, je vous suggère de suivre cette voie. Si vous n'êtes pas fou des limitations de youtube ou de vimeo free, vous pouvez mordre la balle pour Vimeo Pro. Cela peut valoir le casse-tête à long terme. Ce que vous ne voulez pas, c'est mettre une vidéo sur votre site qui le ralentit ou qui semble mal. Cela n'en vaut tout simplement pas la peine.

Plateformes vidéo tierces prises en charge par les modules vidéo et curseur vidéo

Si vous souhaitez utiliser les modules Video et Video Slider pour ajouter vos vidéos tierces, vous pouvez utiliser les plates-formes populaires suivantes :

• Youtube
• Viméo
• Dailymotion

Comment ajouter des vidéos tierces à l'aide de Divi

Pour ajouter une vidéo à partir de l'une de ces plateformes, vous devrez vous rendre sur leur site pour obtenir le lien de partage.

Ensuite, vous pouvez le coller dans le module vidéo ou curseur vidéo.

Cliquez sur le bouton « Générer à partir de la vidéo » pour ajouter une superposition d'images. Ou téléchargez l'un des vôtres.

Enregistrer les paramètres. Et c'est tout.

Gardez à l'esprit que Divi est construit sur WordPress, vous pouvez donc toujours intégrer des vidéos de plateformes tierces en utilisant leurs codes d'intégration suggérés sans utiliser le module vidéo. Ajoutez simplement un module de texte et entrez le code d'intégration dans la zone de contenu.

Vous devrez peut-être personnaliser la largeur et la hauteur de votre intégration pour s'adapter à une mise en page réactive.

Et Wistia ?

Wistia est une plateforme puissante que beaucoup de gens utilisent mais malheureusement elle ne fonctionne pas bien avec les modules Divi actuellement. Vous pouvez cependant intégrer Wistia en utilisant le code d'intégration qu'ils fournissent.

Coller ce code dans une section de contenu de votre site Divi affichera la vidéo.

Vous pouvez même coller le code dans la section de contenu du module de curseur pour ajouter une vidéo wistia comme l'une de vos diapositives. Cependant, vous devrez ajuster certains CSS pour qu'il ressemble à ce que vous voulez.

Utiliser des arrière-plans vidéo avec Divi

Devriez-vous même utiliser un arrière-plan vidéo ?

Avant d'entrer dans les détails des arrière-plans vidéo, il est important que vous vous demandiez honnêtement si vous devriez ou non en utiliser un. Ne vous méprenez pas, j'aime un bon arrière-plan vidéo. Mais parfois, cela n'a tout simplement pas de sens. Ne vous y trompez pas, les vidéos ralentiront votre site et peuvent distraire votre contenu. Ne choisissez donc jamais un arrière-plan vidéo plutôt qu'une image plus efficace. Votre site peut être meilleur sans.

Mais, il y a des moments où la vidéo est une meilleure solution qu'une image. Lorsqu'il est bien fait, un arrière-plan vidéo peut donner vie à votre contenu. Alors, rendez votre vidéo utile et faites en sorte qu'elle compte.

Capacités d'arrière-plan vidéo dans Divi

Vous pouvez ajouter un arrière-plan vidéo presque partout où vous le souhaitez à l'aide de Divi Builder. Vous pouvez ajouter un arrière-plan vidéo à chaque section, ligne et colonne. Vous pouvez même ajouter des arrière-plans vidéo à la plupart des modules.
Voici les modules qui prennent en charge les arrière-plans vidéo.

• En-tête pleine largeur (fonctionne également sur l'option plein écran)
• Menu pleine largeur
• Portefeuille pleine largeur
• Curseur de publication pleine largeur (lorsque vous n'utilisez pas l'image en vedette, vous pouvez utiliser un arrière-plan vidéo pour servir d'arrière-plan pour toutes les diapositives)
• Titre du message pleine largeur
• Curseur pleine largeur (fonctionne avec des diapositives individuelles)
• Module audio
• Comptoirs de bar
• Module Blurb - assurez-vous simplement de donner un peu de rembourrage au module.
• Module d'appel à l'action
• Compte à rebours
• Option d'e-mail
• Portefeuille filtrable
• Module de connexion
• Module compteur de nombres
• Module Personne
• Paramètres du portefeuille
• Post Slider (Lorsque vous n'utilisez pas l'image sélectionnée, vous pouvez utiliser un arrière-plan vidéo pour servir d'arrière-plan pour toutes les diapositives)
• Titre de l'article
• Tableau des prix (Vous pouvez définir un arrière-plan vidéo pour le module et pour les différents tableaux individuellement)
• Curseur (pour les arrière-plans des diapositives individuelles uniquement)
• Onglets (pour l'arrière-plan du module et les onglets individuels)
• Témoignage
• Texte
• Basculer

Bibliothèques de vidéos d'archives

La partie difficile de l'ajout d'un arrière-plan vidéo à votre site est de trouver la bonne image et de s'assurer qu'elle est de la bonne taille. Heureusement, vous n'avez pas besoin de créer vos propres arrière-plans vidéo personnalisés. Il existe des bibliothèques de vidéos libres de droits disponibles qui peuvent bien fonctionner pour votre site Web. Si vous recherchez des séquences vidéo gratuites, vous pouvez commencer par videvo, coverr ou videezy. Si vous recherchez des versions payantes de meilleure qualité, vous pouvez consulter videohive, videoblocks ou pond5. Certains de ces sites utilisent très bien les arrière-plans vidéo si vous cherchez de l'inspiration.

Comment ajouter un arrière-plan vidéo à votre page

Une fois que vous avez trouvé (ou créé) la bonne vidéo, les choses deviennent vraiment faciles. Pour ajouter un arrière-plan vidéo à votre page Web Divi, déployez simplement le constructeur visuel et recherchez la section où vous souhaitez ajouter la vidéo et cliquez sur l'icône Paramètres de la section.

Sous l'onglet contenu, cliquez sur l'icône/l'onglet de l'image d'arrière-plan sous les options d'arrière-plan. Si vous avez une vidéo auto-hébergée, entrez les formats mp4 et webm. Saisissez ensuite les dimensions de la vidéo pour que Divi sache comment la dimensionner correctement.

Allez maintenant dans l'onglet Image d'arrière-plan et ajoutez une image d'arrière-plan qui servirait de solution de secours pour les appareils mobiles.

Ensuite, enregistrez les paramètres. C'est si simple.

Si vous comptiez utiliser l'une de vos vidéos que vous hébergez désormais sur youtube (ou vimeo) en arrière-plan, cela n'est actuellement pas possible dans le constructeur Divi. N'oubliez pas que vous avez besoin de ces vidéos dans les formats corrects pour les afficher sur tous les navigateurs. Cependant, vous pouvez télécharger cette vidéo Youtube (si elle vous appartient) et la convertir aux formats mp4 et webm à utiliser sur votre arrière-plan.

Astuce de conception d'arrière-plan : utiliser un arrière-plan vidéo pour votre curseur de publication pleine largeur

Si vous recherchez un moyen créatif de présenter vos articles en vedette sur votre page de blog, vous pouvez ajouter un arrière-plan vidéo à votre curseur de publication. Laissez-moi vous montrer ce que je veux dire.

Accédez à votre page à l'aide de Visual Builder et ajoutez une section pleine largeur en haut de la page avec un module de curseur de publication pleine largeur.

Sous l'onglet Contenu, sous Afficher l'image en vedette, sélectionnez « NON ».

Ensuite, dans la section Arrière-plan, sélectionnez l'onglet Arrière-plan vidéo et ajoutez les deux formats de votre vidéo, ainsi que les dimensions.

C'est également une bonne idée d'ajouter une image d'arrière-plan comme solution de secours pour les appareils mobiles qui ne peuvent pas afficher les arrière-plans vidéo.

C'est ça.

Désormais, l'utilisateur peut faire défiler le curseur de votre publication en vedette avec une vidéo d'arrière-plan sympa. Assurez-vous simplement que l'arrière-plan de la vidéo est suffisamment subtil pour ne pas distraire le contenu.

Meilleures pratiques pour les arrière-plans vidéo

Avec toutes les possibilités offertes par les arrière-plans vidéo, j'ai pensé qu'il était préférable d'inclure quelques bonnes pratiques générales.

1. Incluez toujours une image d'arrière-plan comme solution de secours pour mobile. Les appareils mobiles ne lisent pas automatiquement les vidéos volumineuses. C'est pourquoi Divi affiche l'image de repli par défaut sur les appareils mobiles.
2. Utilisez une petite vidéo. Pour les vidéos d'arrière-plan, vous pouvez vous en sortir avec une résolution de 720p, car l'arrière-plan est une seconde réflexion sur le contenu/texte superposé à la vidéo. La qualité n'en souffrira pas autant que vous le remarquerez.
3. Considérez une superposition. L'ajout d'une superposition de couleur semi-transparente au-dessus de la vidéo vous aidera à vous en sortir avec une taille de fichier plus petite, car elle masquera les détails désordonnés d'une vidéo de moins bonne qualité. De plus, votre texte se démarquera davantage.
4. N'utilisez pas le son. Vous n'avez pas besoin de son pour les arrière-plans vidéo, alors retirez-le. Cela réduira la taille du fichier.
5. Utilisez les formats mp4 et webm pour la prise en charge de plusieurs navigateurs.

Suspendre la vidéo ?

Vous avez peut-être vu cette option répertoriée dans les paramètres sous les options d'arrière-plan.

Dans certains cas, la vidéo peut entrer en conflit avec un autre fond vidéo jouant un son. Cette option permet de ne jouer qu'un seul son vidéo à la fois.

Piratage vidéo Divi

Il existe quelques personnalisations plus avancées de la vidéo et de l'arrière-plan vidéo qui peuvent vous être utiles. Voici quelques-uns.

Redimensionner votre bouton de lecture

Si vous souhaitez modifier la taille de votre bouton de lecture, accédez aux paramètres du module vidéo, sous l'onglet Avancé, et entrez le CSS personnalisé suivant dans la case intitulée « Icône vidéo » :

Font-size: 10rem;
Line-height: 10rem;
Margin-top: -5rem;
Margin-left: -5rem;

Vous pouvez ajuster les valeurs à la taille que vous voulez. Assurez-vous simplement que la taille de la police et la hauteur de la ligne restent toujours les mêmes et que les marges supérieure et inférieure restent toujours une valeur négative égale à la moitié de la taille de la police. Par exemple, si vous vouliez le réduire, les valeurs seraient.

Font-size: 4rem;
Line-height: 4rem;
Margin-top: -2rem;
Margin-left: -2rem;

Comment empêcher l'arrière-plan de la vidéo de s'arrêter au clic

Dans certains cas, vous constaterez peut-être que cliquer sur l'arrière-plan de votre vidéo mettra la vidéo en pause. Vous pouvez désactiver cette fonctionnalité en ajoutant le CSS personnalisé suivant à votre fichier style.css dans votre thème enfant (ou dans le personnalisateur de thème > CSS supplémentaire) :

.et_pb_section_video_bg video {
pointer-events: none;
}

Comment arrêter la boucle de l'arrière-plan vidéo

Vous vous souvenez peut-être de cette astuce dans l'un de nos anciens articles. Par défaut, l'arrière-plan vidéo continuera à tourner en boucle. C'est exprès car c'est normalement ce que vous voulez qu'un arrière-plan vidéo fasse. Mais si vous souhaitez juste afficher votre vidéo d'arrière-plan une fois puis quitter, vous pouvez désactiver l'action de boucle en allant dans Divi > Options du thème > Intégration et entrez ce qui suit dans le :

<script>
(function($) {
    $(document).ready(function() {
        $('.no-loop .et_pb_section_video_bg').each(function() {
            $(this).find('video').removeAttr('loop');
        });
    });
})(jQuery);
</script>

Dimensions vidéo pour Divi

Je ne voulais pas terminer le post sans mentionner les dimensions de la vidéo. Il n'y a pas de règle ferme sur les dimensions à utiliser étant donné que toutes les vidéos et tous les sites Web sont différents. Une vidéo 720p (1280×720) peut avoir l'air bien étirée sur un écran 1920×1080 tandis qu'une autre aura l'air horrible. Lorsque vous décidez des dimensions ou de la résolution d'une vidéo pour votre site, vous pouvez suivre les dimensions de l'image pour les dispositions de colonnes et les modules de Divi comme ligne directrice générale. En termes simples, votre vidéo doit être la plus proche de la largeur de la colonne dans laquelle elle se trouve sans passer en dessous. Donc, si vous avez une colonne pleine largeur d'une largeur maximale de 1080px, vous ne devriez pas avoir besoin d'une vidéo avec une résolution supérieure à 720p (1280×720). Cependant, si vous utilisez un arrière-plan vidéo qui s'étend sur toute la largeur de votre navigateur, vous devrez peut-être aller jusqu'à 1080p (1920 × 1080) afin que lorsqu'il s'étend sur toute la largeur du navigateur sur des moniteurs plus grands, il ne avoir l'air granuleux.

Si vous comptez faire appel à un professionnel de la vidéo tiers pour préparer vos vidéos pour le Web, voici une liste de résolutions vidéo recommandées pour YouTube.

2160p : 3840 × 2160
1440p : 2560×1440
1080p : 1920×1080
720p : 1280×720
480p : 854 × 480
360p : 640×360
240p : 426×240

Ceux-ci suivent le format 16:9 afin que vous ne voyiez pas les barres noires sur les côtés de la vidéo.

Vimeo donne également des directives pour les vidéos. J'aime particulièrement le post de Vimeo sur les bases de la compression vidéo.

Dernières pensées

Les vidéos continueront de faire partie intégrante de notre expérience en ligne pendant longtemps. Il est donc important que vous sachiez ce que vous faites lorsque vous ajoutez des vidéos à votre site Web. Si vous décidez d'utiliser la vidéo sur votre site Web, Divi rend le processus extrêmement simple, en fournissant une solution multi-navigateur pour les vidéos auto-hébergées et une solution pratique pour les intégrations tierces. Mais Divi ne peut pas tout faire à votre place. J'espère que cet article vous aidera dans le processus de sélection de la bonne vidéo et de sa préparation pour le Web.

J'ai hâte de vous entendre dans les commentaires.