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.
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
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
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.
Social Plugin