Dica: vídeos embed responsivos

0

Publicado por

Todos os direitos reservado: Blog + Conteudo

Muitos sites atualmente estão sendo lançados já com a função de responsividade, ou seja, eles se adaptam a vários tamanhos de telas diferentes, facilitando a navegação em smartphones, tablets ou computadores. Um dos problemas neste tipos de função costuma ser os vídeos embed do YouTube ou Vimeo – aqueles que embutimos nos posts ou páginas do site. Estes vídeos precisam de atributos de altura e largura para serem exibidos no melhor formato possível em relação a largura do local onde ele será embutido no site. Quando acessamos o site através de um celular ou tablet e o tema se ajusta para aquela tela, contudo, os vídeos não se ajustam pois eles tem a altura e a largura definidas no código – o que acaba com a graça do seu site responsivo. Existe uma solução bem simples para isso, basta inserir um pedaço de CSS na folha de estilo do seu site e embutir os vídeos dentro de uma DIV pre-definida e sem as medidas.

Veja na prática como ter vídeos embed responsivos:

1. Insira este trecho de CSS na sua folha de estilos do site e salve as alterações

1. Insira este trecho de CSS na sua folha de estilos do site e salve as alterações

.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

2. Vá ao YouTube ou ao Vimeo e copie o código de embed do vídeo desejado, exemplo:

<iframe width=”420″ height=”315″ src=”//www.youtube.com/embed/ecirRN_b0aY?rel=0″ frameborder=”0″ allowfullscreen>
</iframe>

3. Cole este código no seu post ou página onde deseja embutir o vídeo:

<div class=”embed-container”>
INSERIR AQUI O EMBED COPIADO NO PASSO 2
</div>

Na linha 2 acima você vai inserir o código que copiou no YouTube e irá remover os atributos “width” e “height” ficando com algo similar a isto:

<div class=”embed-container”>
<iframe src=”//www.youtube.com/embed/ecirRN_b0aY?rel=0″ frameborder=”0″ allowfullscreen></iframe>
</div>

Pronto! Agora o resultado será um vídeo que se ajusta à dimensão da tela automaticamente

Campartilhe.

Sobre o Autor

Deixe Um Comentário

Copyright © 2003 - 2017 - Portal Folha do Valentina Notícias - Rádio, TV Jornal Jampa Notícias - TV JAMPA - Petrúcio Prado