Como embedar vídeos do YouTube de forma responsiva com CSS

Um dos propósitos de montar um site responsivo é garantir que todo o conteúdo se adapte facilmente aos diferentes tamanhos de telas, de smartphones e tablets a monitores. Só que isso pode se tornar uma dor de cabeça quando parte do conteúdo é um vídeo de fontes externas, como o YouTube, que vem com um código pronto e que não pode ser alterado.

Isso aconteceu comigo quando estava montando o novo layout do blog e, depois de um tempo pesquisando e testando, encontrei um código que adapta o player ao site. É útil principalmente se você usa WordPress.

span[class*="embed-"] {
position: relative;
padding-top: 28.125%;
padding-bottom: 28.125%;
height: 0;
overflow: hidden;
margin: 0;
}
span[class*="embed-"] iframe, 
span[class*="embed-"] object, 
span[class*="embed-"] embed { 
position: absolute; 
top:0; 
left: 0; 
width: 100%; 
height: 100%; 
margin: 0;
}

Caso tenha algum problema com as margens, principalmente entre parágrafos, você pode tentar ajustar o parâmetro overflow e a margem no span (o primeiro do código). Não altere os demais parâmetros a menos que você saiba o que está fazendo, caso contrário isso pode interferir na exibição ou até no funcionamento do player.

Avatar de Matheus Misumoto