ATENÇÃO Este site utiliza cookies. Ao navegar no site estará a consentir a sua utilização. 

Autenticar Registar

Login na sua conta

Username
Password *
Lembrar-me
Faça Login utilizando uma conta social:
  • google
  • twitter

Criar uma conta

Os campos marcado com (*) são obrigatórios.

2.55

A melhor maneira de implementar design responsivo nos seus vídeos embutidos do YouTube ou outros vídeos é adicionar código CSS.
 
No entanto, a maior parte dos gestores de conteúdos (CMS) como o Wordpress, Joomla, Prestashop entre outros obriga a que estas alterações sejam diretamente editadas nos templates.
 
Antes de aparecerem os dispositivos móveis e tablets, basicamente incorporava-se os vídeos diretamente com os tamanhos originais. Neste momento existe a necessidade que estes vídeos sejam redimensionados ao ecran que está a ser visualizado. Agora com os modelos responsivos torna-se um pouco mais complicado de incorporar um vídeo. Se você especificar um iframe de 600px de largura, o vídeo ficará bem no seu desktop ou laptop, mas provavelmente será dobro da largura para um dispositivo móvel. Existe várias formas de resolver este problema e para quem usa CMS´s pessoalmente prefiro não ter de imbutir código CSS no template. Assim deixo um exemplo de como imbutir HTML num módulo sem usar CSS.
 
Podem testar neste video de Youtube redimensionando o browser e verificam que o video se auto ajusta.
 
 
 

 

<div style="position: relative; padding-bottom: 56%; height: 0; overflow: hidden;">
<iframe height="360" width="640" frameborder="0" src="https://www.youtube.com/embed/_KLR1mF6F2o?rel=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
</div>
Informações do Autor
Author: Nuno Pereira
Mais artigos do autor

 

Gearbest promoção em Junho para site principal promotion
Campanha promocional novos aderentes

Slotcoin - best Satoshi Machine