ursopreto.com

Como fazer um Embed de vídeo Responsivo? Youtube, Vimeo e mais!

reprodução; Sanadas

Uma boa exibição de conteúdo é extremamente importante para páginas na internet, além de um bom conteúdo, cuidar para que o usuário tenha uma boa experiência numa página é indispensável.

Vou mostrar neste tutorial simples, uma forma fácil de como exibir vídeos do youtube, vimeo e quaisquer outros embed de vídeo existentes – de forma responsiva, isso vale para qualquer dispositivo, computares, Smartfones, tablets e tvs. 

Vamos lá!

1. Nomeie o embed do vídeo para que o código CSS possa reconhecê-lo. Basta adicionar ”div class” no vídeo alvo. 

2. Depois de ‘nomear’ o código cujo queremos que seja exibido de forma responsiva, precisamos adicionar um CSS para determinar os estilos.:



O Código ficará assim;

VEJA AQUI A DEMONSTRAÇÃO

Pronto! agora seus vídeos serão exibidos com perfeição. Para mudar os parâmetros de exibição, edite a porcentagem e modo de exibição, respectivamente; 56.25% e 16:9. 


O código iframe do youtube(em vermelho) pode ser substituído por qualquer outro embed de vídeo. 

Nomeie “TESTE” com o que preferir. Caso deseja usar vários parâmetros de vídeos numa mesma página, logicamente é preciso nomear cada código distintamente. 

Esse tutorial te ajudou?  

.TESTE {
position: relative;
padding-bottom: 73.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.TESTE iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}