Como criar um controle deslizante de vídeo do YouTube responsivo

Publicados: 2020-04-06

Se você é proprietário de um canal do youtube que contém vários vídeos em seus serviços, além disso, está executando um site WordPress e precisa criar um controle deslizante de vídeo responsivo do youtube em seu site WordPress, neste caso, recomendo seguir Este artigo.

Este artigo contém instruções passo a passo completas sobre como criar um controle deslizante de vídeo do youtube responsivo no site do WordPress. Mostrarei a melhor e mais fácil maneira de criá-lo para que você não precise ter nenhuma habilidade de codificação para criar um controle deslizante de vídeo completo do youtube em seu próprio site WordPress.

O controle deslizante de vídeo do WordPress é benéfico para o seu site porque chama facilmente a atenção de seus visitantes. Consequentemente, aumenta a taxa de conversação e as vendas. Você pode exibir facilmente os vídeos do seu canal do youtube em seu site WordPress.

Por padrão, não há opção de criar um controle deslizante de vídeo no WordPress. Portanto, se você deseja criar um controle deslizante de vídeo do youtube do WordPress em seu site, deve escolher um dos melhores plugins, como o WordPress Carousel Pro , que permite criar facilmente um controle deslizante de vídeo do youtube responsivo.

Controle deslizante de vídeo responsivo do YouTube
Controle deslizante de vídeo responsivo do YouTube

Se quisermos criar um slider de vídeo do youtube com o plugin WordPress Carousel Pro , temos que seguir 3 passos.

Passo 1: Instalação e ativação do plugin WordPress Carousel Pro

Etapa 2: adicionar um novo carrossel de vídeos do Youtube

Passo 3: Exiba o Carrossel de Vídeos do Youtube no site WordPress

Passo 1. Instalação e ativação do plugin WordPress Carousel Pro

Em primeiro lugar, temos que instalar e ativar o plugin WordPress Carousel Pro para avançar na criação de um controle deslizante de vídeo do WordPress no youtube. A instalação e ativação de qualquer plugin do WordPress são as mesmas para todos. No entanto, se precisar de alguma orientação, você pode seguir esta instrução de instalação e ativação .

Carrossel Pro do WordPress

Etapa 2: adicionar um novo carrossel de vídeos do Youtube

Eu tenho que você terminou com sucesso a instalação e ativação do plugin. Agora é hora de criar nosso primeiro carrossel de vídeos do youtube. É um processo realmente super rápido e fácil. No entanto, depois de concluir a ativação, você encontrará o menu WP Carousel Pro no menu do painel do WordPress. Agora clique no menu Adicionar Novo , ele abrirá uma interface com vários campos. Agora, preencha os campos com seu conteúdo. Neste caso, siga o guia passo a passo.

(i) Título do carrossel: Dê um título para o carrossel de vídeos do youtube neste campo.

(ii) Tipo de carrossel: Você pode criar carrosséis multifuncionais com o plugin WordPress Carousel Pro. Como queremos criar um controle deslizante de vídeo do youtube, basta selecionar o tipo de carrossel de vídeo.

Selecione o tipo de carrossel: vídeo

(iii) Adicionar vídeos: Ao selecionar o tipo de carrossel de vídeos, você encontrará um botão para adicionar vídeos. Então, clique no botão Adicionar vídeo . Consequentemente, ele abrirá uma interface com os seguintes campos de entrada.

Campo de entrada de vídeo

Você pode ver que há uma opção para selecionar a fonte de vídeo. Você pode selecionar vídeos de diferentes fontes. Como queremos criar um controle deslizante de vídeo do youtube, temos que selecionar o Youtube como fonte de vídeo. Parece a tela a seguir.

Selecione: Fonte de vídeo

Além disso, neste estágio, agora precisamos inserir o ID do vídeo que queremos adicionar ao seu carrossel de vídeos do youtube. Por esse motivo, acesse o link de vídeo específico e colete o ID e defina o ID no campo ID do vídeo . Parece a tela a seguir.

Dê o ID do vídeo

No entanto, você pode clonar um vídeo facilmente. Então, seguindo o mesmo procedimento, adicione os vídeos, quantos conforme sua necessidade. Você também pode arrastar e soltar os vídeos.

(iv) Personalização do Carrossel: o plugin é altamente personalizável. Você pode personalizar qualquer campo de acordo com suas necessidades.

(v) Publicação: Uma vez finalizada a customização, ela está completamente pronta para publicar o carrossel de vídeos do youtube. Agora, clique no botão Publicar para publicá-lo.

Etapa 3: exibir o carrossel de vídeos do Youtube

Finalmente, criamos com sucesso nosso carrossel de vídeos do youtube. Como resultado, agora estamos completamente prontos para exibir o carrossel de vídeos do youtube em nosso site WordPress. Agora, você tem que copiar o shortcode e colá-lo onde quiser.

Código de acesso gerado

Editor Gutenberg

Se você estiver usando o editor Gutenberg em seu tema WordPress, você pode colar o shortcode e ele se parecerá com a tela a seguir.

Editor Gutenberg

Editor clássico

Você também pode usar o editor antigo chamado Classic Editor. Se você colar o código de acesso no editor clássico, ele se parecerá com a tela a seguir.

Editor clássico

Copiei o shortcode e colei em uma página e finalmente encontrei o seguinte resultado no meu site WordPress.

Controle deslizante de carrossel de vídeos do Youtube

Personalização do carrossel de vídeos do Youtube

Existem algumas opções para personalizar o carrossel de vídeo e representá-lo com uma aparência diferente. Se você quiser mostrar o título do vídeo, basta adicionar o título do campo Título e Descrição a seguir .

Título do vídeo

Agora, clique na guia CONFIGURAÇÕES DE ESTILO e role para baixo até a opção Descrição mostrar e ocultar. Então, basta ativar a opção de mostrar o conteúdo. Você pode seguir a captura de tela abaixo.

Descrição do vídeo Ativar

Depois de terminar esta etapa, agora veja o resultado. Eu fiz isso e encontrei o seguinte resultado.

Carrossel de vídeos do Youtube com título

Além disso, não termina aqui. Além disso, você também pode adicionar a descrição de cada vídeo. Se você deseja adicionar a descrição, pode seguir facilmente o procedimento de adicionar o título. Parece o seguinte -

descrição do vídeo

Por fim, atualize novamente a página onde você colou o código de acesso e você também verá a descrição do vídeo. Será parecido com o seguinte-

Carrossel de vídeos do YouTube com título e descrição

Além disso, você também pode personalizar a cor do ícone do vídeo. Se você estiver interessado em personalizar a cor do ícone de vídeo, clique na guia CONFIGURAÇÃO DE ESTILO e vá para a opção Cor do ícone de vídeo. No entanto, será parecido com o seguinte

Personalização da cor do ícone de vídeo

Além disso, selecionei uma cor vermelha como a cor do ícone do vídeo. Agora, volte para a visualização do controle deslizante do carrossel e atualize-o. Depois de atualizá-lo, você encontrará a mudança de cor do ícone. Eu tenho o seguinte.

Saída de cor do ícone de vídeo

Palavras finais

Finalmente, estou no final deste artigo e espero que você tenha feito seu trabalho e criado com sucesso seu primeiro carrossel de vídeos do youtube seguindo o caminho melhor e mais fácil.