Aprenda neste artigo como incorporar seus vídeos do YouTube, nas suas publicações no Blogger, de maneira responsiva...
As suas publicações no Blogger devem aparecer bem adaptadas em qualquer formato ou tamanho de tela. Isso talvez você já saiba, mas talvez esteja com dificuldade de aplicar isso no seu blog na plataforma Blogger.Assista ao passo a passo:
 |
Recomendo a série de tutoriais da Elaine Gaspareto neste link. Acompanhando este passo a passo você deixa todo o blog responsivo, com exceção dos vídeos do YouTube.
A dica a seguir eu consegui através do blog Theodo e apliquei no meu blog.
"Antes e depois..."
Quando você incorpora o vídeo através da barra de ferramenta do Blogger, o vídeo fica assim (veja em um celular ou simule em um site de teste):
Depois de seguir o passo a passo deste artigo, seu vídeo ficará assim:
Vamos ver como se faz essa mudança...
Um pouco de CSS
O que você deve fazer é inserir dois blocos de código CSS no código HTML do seu Blogger e em cada vídeo incorporado em suas publicações.
Selecione Tema no menu à esquerda do Painel do seu Blogger e depois clique em Editor HTML:
Selecione Tema no menu à esquerda do Painel do seu Blogger e depois clique em Editor HTML:
Procure a seção /* Content ----------------------------------------------- */ no seu Editor HTML (abra o campo de pesquisa, clicando dentro do campo onde estão os códigos e pressionando juntas as teclas Ctrl + F, no seu teclado). Digite /* Content no campo e pressione Enter para localizar o trecho do código onde você vai inserir ou copiar os blocos de código CSS:
Copie estes dois blocos de código:
.resp-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
E cole antes de /* Header ..... */, como na imagem abaixo:
E cole antes de /* Header ..... */, como na imagem abaixo:
Salve as alterações
Altere o código nas suas publicações
Abra cada publicação do seu blogger com vídeos do YouTube incorporado e apague os ajustes de width e height (largura e altura) - altere a edição para HTML e busque a linha abaixo:
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/xNrx6P_qqsQ/0.jpg" src="https://www.youtube.com/embed/xNrx6P_qqsQ?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
Use novamente a combinação de teclas Ctrl + F e digite youtube no campo de pesquisa para localizar o trecho onde está o código:
Use novamente a combinação de teclas Ctrl + F e digite youtube no campo de pesquisa para localizar o trecho onde está o código:
Substitua separator por resp-container (entre parênteses em div class=”separator”); e YOUTUBE-iframe-video por resp-iframe;
<div class="resp-container" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="resp-iframe" data-thumbnail-src="https://i.ytimg.com/vi/ls7qqbyQoQ4/0.jpg" frameborder="0" src="https://www.youtube.com/embed/ls7qqbyQoQ4?feature=player_embedded"></iframe></div>
Atualize sua publicação e confira o resultado!