Como Incorporar Vídeo do Youtube Responsivo

Aprenda Como Deixar seus Vídeos Responsivos. Veja como colocar os vídeos com player responsivo do Youtube no seu blog. Podemos tornar qualquer vídeo do Youtube responsivo Blogger, isto é, vídeo ajustável a largura da pagina seja no computador ou celular para que os vídeos incorporados no seu site ou blog se adaptem a qualquer tipo de tela.

Como Incorporar Vídeo do Youtube Responsivo

Deixar Vídeo Responsivo do YouTube

Para colocar o código para deixar os Vídeos Responsivos no Blogger você precisa adicionar um código CSS. Isto pode ser feito de 2 maneiras, mas antes de alterar seu blog sugerimos que Faça um Backup do seu Template.

Diretamente pela pagina Editar HMTL (Método indicado para quem já tem um pouco de experiência com códigos). Ou entre na pagina Tema > Personalizar > Avançado > Role a lista de opções até achar: Adicionar CSS

Agora copie e cole o código a seguir:

.video-responsive{overflow:hidden;padding-bottom:56.25%;position:relative;height:0;margin:30px 0px}
.video-responsive iframe{left:0;top:0;height:100%;width:100%;position:absolute;}

O trecho: margin:30px 0px. Deixa um espaço vazio acima e abaixo do vídeo que você incorporou no seu site, portanto pode alterar o valor 30 para deixar o espaço que quiser.

Se você quiser é possível adicionar bordas nos Videos e aplicar outros estilos CSS, veja aqui: Dicas de CSS. Mas não é necessário alterar nada neste código.

Colocar Vídeo Responsivo do Youtube no Blog


Para Incorporar um vídeo responsivo primeiro vamos pegar o código do vídeo no Youtube normalmente, clicando em compartilhar vídeo e depois incorporar. Usamos para teste um vídeo do nosso canal de Frases no Youtube.

O código do Video do Youtube é parecido com este:

<iframe width="560" height="315" src="https://www.youtube.com/embed/mXTGMThIcWg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

O que vamos fazer é apagar o trecho do código que define a largura e altura do vídeo: width="560" height="315" e depois vamos aplicar o CSS Responsivo neste vídeo usando uma div.

Então o código que você colocará no seu blog ficará assim:
<div class="video-responsive">
<iframe src="https://www.youtube.com/embed/mXTGMThIcWg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

Agora só precisa publicar a postagem normalmente que este vídeo ficará responsivo. Note que somente os vídeos adicionados dentro de uma div como fizemos aqui são responsivos, ou seja, se já tem vídeos incorporados no seu blog será necessário editar um por um.

Você pode ver aqui Frases de Motivação, um vídeo do Youtube com este código funcionando em nosso outro site.

Além do Youtube este mesmo código pode ser usado para fazer vídeos do Vimeo Responsivos e outros sites de hospedagem e compartilhamento de vídeos online.

Veja Musicas e Efeitos Sonoros Grátis para Usar em Vídeos

Esperamos que gostem desta dica sobre incorporar vídeos responsivos no seu blog. Abraços e Sucesso.

Um comentário: