Deux emplois liés Un carrousel vidéo glisse à travers des vidéos sur une piste horizontale A curseur galerie affiche un grand aperçu avec une bande miniature en dessous, qui est la disposition que les gens veulent réellement lorsqu'ils disent “ carousel vidéo,” car une rangée de vignettes vidéo de taille égale est une pire façon de regarder quoi que ce soit.
Les deux ci-dessous, plus le problème d'intégration qui fait des carrousels vidéo le widget le plus lent que vous pouvez mettre sur une page et le correctif d'une ligne pour celui-ci Les deux widgets font partie du collection complète de widgets de carrousel.
Commencez par le problème de vitesse de page
Six intégrations YouTube sur une page représentent environ 3 Mo de JavaScript tiers avant la lecture d'une seule vidéo. Chaque iframe charge le lecteur YouTube, ses analyses et son infrastructure de cookies, que quelqu'un clique ou non.
Mettez ces six dans un carrousel et ça empire, parce que un carrousel rend toutes ses diapositives(y compris ceux hors écran, donc les six iframes s'initialisent à la fois.
Le correctif est un façade: afficher l'image de l'affiche de la vidéo avec un bouton de lecture, et ne charger le vrai embed que lorsque quelqu'un clique Une image au lieu de six joueurs La plupart des widgets vidéo ont une option “lazy load” ou “click to play” qui fait cela ; l'allumer et la page obtient plusieurs secondes plus vite sur mobile.
Si votre widget ne le propose pas, utilisez des images d'affiches avec une boîte à lumière au lieu d'incrustations en ligne Même résultat visuel, une fraction du poids.
Méthode 1 : Gallery Slider, aperçu plus vignettes
Le Galerie Widget Slider vous donne la mise en page souhaitée par la plupart des galeries de vidéos et de photos : un grand volet d'aperçu avec une bande de vignettes déroulable C'est un widget Pro, et c'est un widget d'image, donc il construit la mise en page plutôt que la lecture Si votre galerie est uniquement composée d'images, sans vidéo, le Galerie de plaques de vitrine est un design gratuit et importable avec la même disposition plaque plus vignette, mais il ne gère pas la vidéo.
- Faites glisser dans le curseur de galerie et ouvrez l'onglet contenu.
- Créez votre galerie de la médiathèque Pour un jeu vidéo qui signifie ici des cadres d'affiches, la lecture étant gérée par la méthode 2 ou 3.
- Allumez les vignettes et réglez la bande de vignettes en mode carrousel afin qu'elle défile indépendamment de l'aperçu principal.
- Définissez la position d'aperçu : vignettes ci-dessous, au-dessus, à gauche ou à droite Vous trouverez ci-dessous la valeur par défaut du coffre-fort ; la gauche ou la droite convient au contenu du portrait.
- Définissez la largeur de l'aperçu ainsi, le volet principal ne pousse pas les vignettes hors écran sur tablette.
Chaque champ du widget est répertorié dans le Documentation du curseur de galerie si vous voulez la référence complète plutôt que le chemin court.
Le mode carrousel à ongles est le réglage qui fait cette échelle Sans elle, vingt vignettes s'enroulent sur quatre rangées et mangent toute la fenêtre Avec elle, elles restent sur une ligne à défilement.
Sur mobile, les vignettes sous l'aperçu à trois ou quatre visibles Les positions gauche et droite s'effondrent automatiquement en dessous, ce qui est à droite, car une bande latérale sur un écran 390 px ne laisse rien pour l'aperçu.
Méthode 2 : Media Carousel, vidéo qui joue dans la piste
Si les vidéos doivent être lues à l'intérieur du carrousel plutôt que derrière un clic, le Media Carousel d'Elementor Pro est le widget qui le fait Chaque diapositive est définie sur Image ou Vidéo, et une diapositive vidéo prend une YouTube, Vimeo ou une URL auto-hébergée qui lui est propre, donc les ensembles mixtes fonctionnent sur une seule piste.
Si l'ensemble est vraiment une bibliothèque plutôt qu'une bande, comme un cours, une série de tutoriels ou une archive de chaînes, la Video Playlist d'Elementor Pro est la meilleure forme Les vidéos répertoriées à côté du lecteur, chacune avec un titre et une durée, et le joueur échange sans charge de page C'est une liste plutôt qu'un carrousel, et c'est l'argument pour cela : les titres sont la façon dont les gens décident quoi regarder, et une rangée de vignettes les fait deviner.
Retour au carrousel Media Carousel est le seul widget ici qui joue la vidéo en ligne, et c'est aussi son coût, qui est ce à quoi servent les paramètres ci-dessous.
- Activez le mode lightbox. La lecture en ligne signifie que chaque diapositive transporte un lecteur. Le mode Lightbox affiche l'affiche et charge le joueur en clic, qui est le motif de façade du haut de ce message intégré au widget.
- Ne pas lire automatiquement la première vidéo. Le tir sonore sans promesse est le moyen le plus rapide de perdre quelqu'un Si vous devez jouer automatiquement, coupez-le.
- Mettez le runtime dans la légende. “Combien de temps est-ce ?” est la première question que l'on pose sur une vidéo, et y répondre avant que le clic n'augmente les taux d'achèvement.
Méthode 3 : Carrousel d'affiches gratuit avec vidéo derrière le clic
Pas de permis et vous voulez toujours un carrousel vidéo ? Deux itinéraires gratuits, et tous deux gardent la page rapide car rien ne se charge jusqu'à ce que quelqu'un la demande.
- Exportez un cadre d'affiche pour chaque vidéo et téléchargez-les sous forme d'images.
- Ajoutez-les à la galerie gratuite Image Carousel.
- Allumez la lightbox pour qu'un clic ouvre le cadre sur la page plutôt que de naviguer.
- Ajoutez une superposition de boutons de lecture dans l'onglet Style afin que les diapositives soient lues sous forme de vidéos plutôt que de photographies. Sans cela, personne ne clique.
Cela vous donne le look Ce qu'il ne vous donne pas, c'est une destination différente par diapositive, car un carrousel basé sur une galerie donne à chaque diapositive le même lien Si chaque vidéo a besoin de sa propre page, donnez à chacune une publication et utilisez le gratuit Widget blog en mode carrousel à la place : il tire la vignette, le titre et un lien vers le post sur lequel se trouve la vidéo Sur Pro, le Carrousel de boucle fait la même chose à partir d'une requête, donc de nouvelles vidéos apparaissent sans que vous modifiiez la page.
C'est le motif de façade du haut du poteau, construit à la main C'est la version la plus rapide d'un carrousel vidéo qui existe, car rien ne se charge jusqu'à ce que quelqu'un le demande. La procédure pas à pas du carrousel d'images couvre le widget dans son intégralité.
Rapport d'aspect et la chose qui le brise
Définissez 16 :9 et réglez-le sur chaque diapositive. Les ratios mixtes dans un carrousel vidéo produisent des cartes de différentes hauteurs, et contrairement à une grille, où un bord inférieur irrégulier est pardonnable, une bande horizontale place chaque décalage directement à côté de son voisin.
Les cartes de produits rencontrent la même chose pour la même raison, et le Guide du carrousel de produits WooCommerce couvre comment les niveler.
Le coupable habituel est un clip vertical dans un décor par ailleurs paysager Soit lui donner son propre carrousel ou boîte aux lettres en 16 :9 avec un fond assorti Ne laissez pas une vidéo 9 :16 définir la hauteur pour onze paysagistes.
Schéma vidéo
Si les vidéos sont votre propre contenu et qu'elles comptent pour la recherche, ajoutez VideoObject schéma : nom, description, URL de la vignette, date et durée de téléchargement C'est ce qui rend possible la richesse des résultats vidéo.
Deux conditions que les gens manquent : la vidéo doit être le contenu principal de la page, pas la décoration, et l'URL de la vignette doit être publiquement explorable Une galerie de six vidéos intégrées sur une page à propos ne se qualifie pas pour les résultats riches en vidéo quelle que soit la manière dont vous la marquez, car le contenu principal de la page n'est pas la vidéo.
Questions fréquemment posées
Elementor a-t-il un widget de carrousel vidéo ?
Le Media Carousel d'Elementor Pro gère les images et les vidéos dans un carrousel Le libre Elementor ne l'inclut pas Le Master Addons ajoute un Gallery Slider dans son niveau Pro pour la mise en page de l'aperçu plus des vignettes, et c'est un widget d'image plutôt qu'un lecteur vidéo Le Carrousel d'images gratuit peut remplacer un carrousel vidéo en utilisant des images d'affiches avec une boîte à lumière.
Comment ajouter un carrousel YouTube dans Elementor ?
Utilisez des images d'affiche plutôt que des intégrations en direct Ajoutez la vignette de chaque vidéo à un carrousel, reliez la diapositive à l'URL de la vidéo et activez la boîte à lumière pour qu'elle s'ouvre sur la page. Six iframes YouTube en direct sur une page représentent environ 3 Mo de JavaScript tiers ; six images d'affiches ne représentent qu'une fraction de cela.
Pourquoi ma page est-elle lente après avoir ajouté un carrousel vidéo ?
Chaque intégration dans le carrousel charge immédiatement son lecteur, y compris les diapositives qui sont hors écran, car un carrousel rend toutes ses diapositives Activez l'option de chargement paresseux ou de clic pour jouer du widget afin que seule l'image de l'affiche se charge jusqu'à ce que quelqu'un clique, ou passez aux images de l'affiche avec une boîte à lumière.
Quelle est la différence entre un curseur de galerie et un carrousel d'images ?
Un curseur de galerie comporte deux parties liées : un grand volet d'aperçu plus une bande de vignettes qui le parcourt Un carrousel d'images est une seule rangée de diapositives de taille égale Utilisez le curseur de galerie lorsque les éléments méritent un regard approprié un à la fois ; utilisez le carrousel lorsque vous montrez un ensemble.
Comment ajouter des vignettes à un curseur Elementor ?
Utilisez le widget Gallery Slider, activez les vignettes dans l'onglet contenu et passez la bande de vignettes en mode carrousel afin qu'un long ensemble reste sur une ligne déroulable au lieu de s'enrouler en lignes. Définissez la position d'aperçu, en dessous, au-dessus, à gauche ou à droite, sous la disposition.
Puis-je mélanger des images et des vidéos dans un carrousel Elementor ?
Oui. Media Carousel d'Elementor Pro prend en charge nativement les types mixtes. Avec le carrousel d'images gratuit, utilisez des images d'affiches pour les vidéos et reliez ces diapositives aux URL des vidéos, de sorte que les images et les vidéos se comportent toutes deux comme des diapositives et que seule la vidéo se charge en clic.
Lequel construire
Série de cours ou de tutoriels : Playlist Vidéo d'Elementor Pro, car les titres et les durées font l'oeuvre Vidéos qui doivent jouer dans une piste de carrousel : Carrousel Média, avec mode lightbox on. Bobine de portefeuille ou démos de produits : Gallery Slider avec vignettes Une poignée de vidéos sur une page marketing et aucune licence : Carrousel Image gratuit avec des images d'affiches et une lightbox, qui est aussi la plus rapide des trois. Et si la vidéo n'était jamais que de la texture de fond pour une section héros, le gratuit Extension de curseur d'arrière-plan fait tourner les images fixes à la place, à une fraction du poids d'une vidéo en boucle.
Aucun des vingt Constructeur de widgets designs gère la vidéo, c'est donc un travail où les widgets de stock sont la réponse Pour tout le reste dans l'ensemble, le page de tarification affiche quel niveau s'applique, et carrousel contre curseur règle d'abord la question sur le format.
Tous sont sur le Widgets de carrousel d'éléments page, et la panne gratuite versus Pro couvre quel niveau chacun se trouve.
