Como colocar um vídeo na sidebar do WordPress

Como colocar um vídeo na sidebar do WordPress mostra, passo a passo, todo o processo, tornando-o simples e fácil de entender.

Passo 1: abrir a área de Widgets em uma aba. Isto não é essencial, mas facilita e agiliza o trabalho.

widgets-area

 

Passo 2: escolher o local (na sidebar) onde o vídeo deve ficar.  Este ponto é importante e deve ser levado em conta o conteúdo do vídeo. Se for uma chamada para a ação, para a captura de leads, por exemplo, deve ficar o mais próximo possível do topo. Se for propaganda, convém ser colocado depois dos artigos e, se possível, fixado.

chamada-para-a-acao

Passo 3: na área de Widgets selecione Texto e arraste para a posição escolhida. Até aqui nada diferente da colocação de um Banner. Coloque um título qualquer para testar a posição. Deixe-o até a conclusão do processo. Então, se desejar, poderá removê-lo.

Passo 4: agora vamos buscar o código HTML para inserir na sidebar. Onde? É o que vou mostrar a seguir. Sugiro que anote ou copie e cole em um editor de texto (pode ser o Bloco de Notas do Windows) e salve na sua pasta de trabalho. Este é o código HTML para inserção de vídeos: (<iframe width=”300″ height=”300″ src=”url do video” frameborder=”0″ allowfullscreen></iframe>). Copie somente a parte que está entre parêntesis.

codigo-html-para-videos

 

Passo 5: e se eu não tiver este código à mão, como fazer? Neste caso (se você viajou e o código ficou no se PC, por exemplo), abra o You Tube, selecione um vídeo (qualquer um), clique em “Compartilhar” e depois em “Incorporar”.

codigo-do-video

Passo 6: na foto vemos o código do vídeo selecionado. Tecle Ctrl+C para copiar e cole na área de texto da sidebar. Detalhe: use uma Widget de texto.

Nota: vamos comparar, para melhor entendimento, o código copiado do You Tube com o código que tínhamos.

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/dGIfXrLie-c” frameborder=”0″ allowfullscreen></iframe>

<iframe width=”300″ height=”300″ src=”url do video” frameborder=”0″ allowfullscreen></iframe>

É o mesmo código! Mudam, apenas, a URL e os valores width e height.

Passo 7: após colocar o código na sidebar você deve “trocar” a URL e ajustar os valores width e height. Para isso, selecione o vídeo em seu PC e faça upload. Na Biblioteca de mídia selecione o vídeo.

selecionando-o-video

Passo 8: na foto vemos a URL do vídeo selecionada. Tecle Ctrl+C para copiar e retorne à área de Widgets. Selecione a URL no código e delete (veja foto abaixo):

url-do-video-sidebar

Passo 9: atenção! Cuidado para NÃO APAGAR nenhum caractere do código! Delete apenas o texto entre aspas. Na foto acima selecionei o código genérico que postei acima. Se você copiar a URL de um vídeo do You Tube selecione a parte “entre aspas”. Exemplo:

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/dGIfXrLie-c” frameborder=”0″ allowfullscreen></iframe>

O trecho destacado em azul é o URL do nosso vídeo de exemplo. Após deletar a URL do código que está na sidebar, cole a URL que você copiou do vídeo na Biblioteca de mídia.

Passo 10: falta apenas ajustar o tamanho do vídeo. Note que no primeiro código o tamanho é 300×300 e no vídeo do You Tube é 560×315 (padrão do You Tube). Se você deixar assim vai funcionar, mas vai ficar muito feio. Para o ajuste correto é necessário verificar o tamanho real do vídeo. Para isto, abra o Windows Explorer (Gerenciador de Arquivos no Windows 10 [obs.: era esse o nome dele “antes” do Windows 95]), selecione o vídeo e anote as dimensões. Veja foto:

tamanho-do-video

Passo 11: O vídeo original tem 854×480 – pode ser qualquer outro valor, não importa. O que importa é fazer o cálculo correto para que fique ajustado à sidebar. Temos um valor fixo que é a largura da sidebar (a maioria tem 300 px). Verifique a largura da sua, varia conforme o template. Vamos ao cálculo: com a calculadora do Windows faça 480×100/854 (alturaX100/largura). Neste caso deu 56. Isto significa que a altura do quadro equivale a 56% da largura. Como a nossa largura disponível é 300 devemos multiplicá-la por 0,56. Temos 168. Nosso código ficará assim:

<iframe width=”300″ height=”168″ src=”http://marketnegocios.com.br/wp-content/uploads/2017/01/Como-colocar-vídeo-na-sidebar-do-WordPress-fácil-e-rápido-480.mp4” frameborder=”0″ allowfullscreen></iframe>

Em azul a URL do vídeo selecionado na Biblioteca de mídia.

Veja mais detalhes no vídeo.

Para ver o vídeo em Full HD clique aqui.

 

Deixe um Comentário

* Indicar Campos Obrigatórios