Como colocar um vídeo na sidebar do WordPress - Negócios On Line
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.
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.
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.
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".
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.
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):
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:
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:
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.
http://marketnegocios.com.br/wp-content/uploads/2017/01/Como-colocar-vídeo-na-sidebar-do-WordPress-fácil-e-rápido-480.mp4