Dois trabalhos relacionados Um carrossel de vídeo desliza através de vídeos em uma trilha horizontal. A deslizador galeria mostra uma visualização grande com uma faixa em miniatura embaixo, que é o layout que as pessoas realmente desejam quando dizem carrossel de vídeo “vídeo,” porque uma linha de miniaturas de vídeo de tamanhos iguais é uma maneira pior de assistir a qualquer coisa.
Ambos abaixo, além do problema de incorporação que faz dos carrosséis de vídeo o widget mais lento que você pode colocar em uma página e a correção de uma linha para ele Ambos os widgets fazem parte do coleção completa de widgets carrossel.
Comece com o problema de velocidade da página
Seis incorporações do YouTube em uma página são aproximadamente 3 MB de JavaScript de terceiros antes de um único vídeo ser reproduzido. Cada iframe carrega o reprodutor do YouTube, suas análises e sua infraestrutura de cookies, independentemente de alguém clicar ou não.
Põe esses seis num carrossel e piora, porque um carrossel apresenta todos os seus slides, incluindo aqueles fora da tela, então todos os seis iframes inicializam de uma só vez.
A correção é a fachada: mostrar a imagem do cartaz do vídeo com um botão play, e só carregar a incorporação real quando alguém clicar Uma imagem em vez de seis jogadores A maioria dos widgets de vídeo tem uma opção “lazy load” ou “click to play” que faz isso; ligá-lo e a página fica vários segundos mais rápida no celular.
Se o seu widget não oferecer, use imagens de pôsteres com uma lightbox em vez de incorporações embutidas Mesmo resultado visual, uma fração do peso.
Método 1: controle deslizante de galeria, visualização e miniaturas
O Widget de controle deslizante de galeria dá-lhe o layout que a maioria das galerias de vídeo e fotos deseja: um grande painel de visualização com uma faixa de miniaturas rolável É um widget Pro, e é um widget de imagem, por isso constrói o layout em vez da reprodução Se a sua galeria for apenas imagens, sem vídeo, o Galeria Placa Vitrina é um design importável gratuito com o mesmo layout de placa mais miniatura, mas não lida com vídeo.
- Arraste no controle deslizante da galeria e abra a guia de conteúdo.
- Crie sua galeria da biblioteca de mídia Para um conjunto de vídeo que significa quadros de pôsteres aqui, com a reprodução tratada pelo método 2 ou 3.
- Ligue as miniaturas e defina a faixa em miniatura no modo carrossel para que ela role independentemente da visualização principal.
- Defina a posição de visualização: miniaturas abaixo, acima, esquerda ou direita Abaixo está o padrão seguro; esquerda ou direita se adequa ao conteúdo do retrato.
- Defina a largura de visualização portanto, o painel principal não empurra as miniaturas para fora da tela do tablet.
Cada campo do widget está listado no Documentação do controle deslizante da galeria se você quiser a referência completa em vez do caminho curto.
O modo carrossel de miniaturas é a configuração que faz essa escala Sem ele, vinte miniaturas se envolvem em quatro linhas e comem toda a janela de visualização Com ele, elas ficam em uma linha rolável.
No celular, miniaturas abaixo da visualização em três ou quatro visíveis As posições esquerda e direita colapsam para baixo automaticamente, o que é certo, porque uma faixa lateral em uma tela de 390 px não deixa nada para a visualização.
Método 2: Media Carousel, vídeo que toca na faixa
Se os vídeos tiverem que ser reproduzidos dentro do carrossel, em vez de atrás de um clique, o Media Carousel do Elementor Pro é o widget que o faz Cada slide é definido como Imagem ou Vídeo, e um slide de vídeo leva um YouTube, Vimeo ou URL auto-hospedado próprio, então conjuntos mistos funcionam em uma faixa.
Se o conjunto é realmente uma biblioteca em vez de uma tira, como um curso, uma série de tutoriais ou um arquivo de canais, a Lista de reprodução de vídeo do Elementor Pro é a melhor forma Vídeos listados ao lado do jogador, cada um com um título e uma duração, e o jogador troca sem uma carga de página É uma lista em vez de um carrossel, e esse é o argumento para isso: os títulos são como as pessoas decidem o que assistir, e uma linha de miniaturas faz adivinhar.
Voltar para o carrossel Media Carousel é o único widget aqui que reproduz vídeo inline, e esse também é o seu custo, que é para o que servem as configurações abaixo.
- Ligar o modo lightbox. Reprodução em linha significa que cada slide carrega um jogador O modo Lightbox mostra o pôster e carrega o jogador no clique, que é o padrão de fachada da parte superior deste post embutido no widget.
- Não reproduza automaticamente o primeiro vídeo. O disparo de som não solicitado é a maneira mais rápida de perder alguém Se você precisar reproduzir automaticamente, mute-o.
- Coloque o tempo de execução na legenda. “Quanto tempo é isso?” é a primeira pergunta que alguém faz sobre um vídeo e respondê-lo antes que o clique aumente as taxas de conclusão.
Método 3: Carrossel de pôsteres gratuito com vídeo atrás do clique
Sem licença e você ainda quer um carrossel de vídeo? Duas rotas gratuitas, e ambas mantêm a página rápida porque nada carrega até que alguém peça.
- Exporte um quadro de pôster para cada vídeo e carregue-o como imagens.
- Adicione-os à galeria gratuita do Carrossel de Imagens.
- Ligue a lightbox para que um clique abra o quadro sobre a página em vez de navegar para longe.
- Adicione uma sobreposição de botão de reprodução na guia Estilo para que os slides sejam lidos como vídeos em vez de fotografias Sem ele, ninguém clica.
Isso lhe dá o visual O que não lhe dá é um destino diferente por slide, porque um carrossel baseado em galeria dá a cada slide o mesmo link Se cada vídeo precisa de sua própria página, dê a cada um um post e use o gratuito Widget blog no modo carrossel em vez disso: ele puxa a miniatura, o título e um link para o post em que o vídeo se senta No Pro, o Carrossel Loop faz a mesma coisa a partir de uma consulta, então novos vídeos aparecem sem você editar a página.
Este é o padrão de fachada do topo do poste, construído à mão É a versão mais rápida de um carrossel de vídeo que existe, porque nada carrega até que alguém peça. A imagem passo a passo do carrossel cobre o widget na íntegra.
Proporção de aspecto e aquilo que a quebra
Defina 16:9 e coloque-o em cada slide. proporções mistas em um carrossel de vídeo produzem cartões de diferentes alturas e, ao contrário de uma grade, onde uma borda inferior irregular é perdoável, uma faixa horizontal coloca cada incompatibilidade diretamente ao lado de seu vizinho.
Os cartões de produto são executados na mesma coisa pelo mesmo motivo, e o Guia carrossel de produtos WooCommerce abrange como nivelá-los.
O culpado usual é um clipe vertical em um conjunto de outra forma paisagem Ou dar-lhe o seu próprio carrossel ou letterbox-lo em 16:9 com um fundo correspondente Não deixe um vídeo 9:16 definir a altura para onze paisagem uns.
Esquema vídeo
Se os vídeos forem de conteúdo próprio e importarem para pesquisa, adicione VideoObject esquema: nome, descrição, URL da miniatura, data de upload e duração É o que torna possíveis resultados ricos em vídeo.
Duas condições que as pessoas perdem: o vídeo tem que ser o conteúdo principal da página, não a decoração, e o URL da miniatura deve ser rastreável publicamente Uma galeria de seis vídeos incorporados em uma página sobre não se qualifica para resultados ricos em vídeo, no entanto, você o marca, porque o conteúdo principal da página não é o vídeo.
Perguntas frequentes
Elementor tem um widget de carrossel de vídeo?
O Media Carousel da Elementor Pro lida com imagens e vídeos em um carrossel O Elementor free não o inclui Master Addons adiciona um Gallery Slider em seu nível Pro para o layout de visualização mais miniatura, e é um widget de imagem em vez de um player de vídeo O Image Carousel gratuito pode substituir um carrossel de vídeo usando imagens de pôsteres com uma caixa de luz.
Como adiciono um carrossel do YouTube no Elementor?
Use imagens de pôsteres em vez de incorporações ao vivo Adicione a miniatura de cada vídeo a um carrossel, vincule o slide ao URL do vídeo e habilite a caixa de luz para que ela se abra sobre a página Seis iframes ao vivo do YouTube em uma página são cerca de 3 MB de JavaScript de terceiros; seis imagens de pôsteres são uma fração disso.
Por que minha página é lenta depois de adicionar um carrossel de vídeo?
Cada incorporação no carrossel carrega seu player imediatamente, incluindo slides que estão fora da tela, porque um carrossel renderiza todos os seus slides Ative a opção de carga preguiçosa ou clique para jogar do widget para que apenas a imagem do pôster carregue até que alguém clique, ou mude para imagens de pôsteres com uma caixa de luz.
Qual é a diferença entre um controle deslizante de galeria e um carrossel de imagens?
Um controle deslizante de galeria tem duas partes vinculadas: um painel de visualização grande mais uma faixa de miniaturas que o navega Um carrossel de imagens é uma única linha de slides de tamanhos iguais Use o controle deslizante de galeria quando os itens merecerem uma aparência adequada, um de cada vez; use o carrossel ao mostrar um conjunto.
Como adiciono miniaturas a um controle deslizante Elementor?
Use o widget Gallery Slider, habilite Thumbnails na guia de conteúdo e alterne a faixa de miniaturas para o modo carrossel para que um conjunto longo permaneça em uma linha rolável em vez de embrulhar em linhas Defina a posição de visualização, abaixo, acima, esquerda ou direita, sob layout.
Posso misturar imagens e vídeos em um carrossel Elementor?
Sim. O Media Carousel da Elementor Pro suporta tipos mistos nativamente Com o Image Carousel gratuito, use imagens de pôsteres para os vídeos e vincule esses slides aos URLs do vídeo, para que imagens e vídeos se comportem como slides e apenas o vídeo carregue ao clicar.
Qual deles construir
Curso ou série tutorial: Video Playlist da Elementor Pro, porque títulos e durações fazem o trabalhoVídeos que têm que jogar em uma faixa carrossel: Media Carousel, com modo lightbox ligado Carretel de portfólio ou demos de produtos: Gallery Slider com miniaturas Um punhado de vídeos em uma página de marketing e sem licença: Carrossel de Imagens grátis com imagens de pôsteres e uma lightbox, que também é a mais rápida das três. E se o vídeo só foi textura de fundo para uma seção de heróis, o gratuito Extensão do controle deslizante de fundo em vez disso, gira imagens estáticas com uma fração do peso de um vídeo em loop.
Nenhum dos vinte Construtor de widgets designs lida com vídeo, então este é um trabalho em que os widgets de estoque são a resposta Para todo o resto do conjunto, o página preços mostra qual nível se aplica e carrossel versus controle deslizante resolve a pergunta de formato primeiro.
Todos eles estão no Widgets Carrossel Elementor página, e a repartição livre versus Pro cobre em qual camada cada um se senta.
