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.
