Techie

Embutir Vídeos Responsivos (Vídeos, Mapas, Instagram)


Muitas pessoas já aderiram aos temas responsivos, que se adaptam à resolução de tela de cada usuário. O problema é que os vídeos do YouTube e Vimeo que embutimos nas páginas não são responsivos, e acabam criando uma quebra no layout. O Google ainda não atualizou o YouTube com a opção de código responsivo e nem sabemos quando eles vão fazer isso.

Se você também não quer ficar esperando a boa vontade desses sites, então vai gostar de conhecer o site Embed Responsively, que permite embutir vídeos responsivos do YouTube e Vimeo, além de embutir mapas responsivos do Google Maps, fotos responsivas do Instagram e códigos iFrame genéricos.

Para utilizar o Embed Responsively basta entrar em:

http://embedresponsively.com

Selecione qual serviço quer criar o códio responsivo (1) (aqui escolhemos o Vimeo). Copie o código do vídeo na página do Vimeo, cole no campo especificado (2) e clique em “Embed“. Copie o código dentro do campo “Embed code” para embutir o vídeo responsivo (3).

Embutir Vídeos Responsivos

Cole esse código na sua página normalmente, como já faz com os vídeos do YouTube e Vimeo:

Para testar aumente e diminua o tamanho da tela do seu navegador, você verá que o vídeo se adapta ao tamanho escolhido junto com o tema.

OBS: Para dar certo, o tema da sua página precisa ser responsivo também.

Para enviar seu comentário, preencha os campos abaixo:

Deixe uma resposta

*

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

1 Comentário

  1. iran disse:

    Legal a dica, funcionou certinho. Vi que existem bastantes plugins também com essa finalidade.