Vídeos incorporados ao colar a URL do Vimeo apresentam muito espaço em branco acima e abaixo do vídeo incorporado em dispositivos móveis.
Verifique essas URLs em um dispositivo móvel para reproduzir o problema:
https://try.discourse.org/t/testing-video-embeds/1369
Capturas de tela:
Então, o que está acontecendo aqui é que nossa tag iframe tem uma largura e altura estáticas, mas o vídeo incorporado do Vimeo redimensiona para 100% de largura e tem altura automática.
Isso também acontece com outros vídeos incorporados em oneboxes assim que você começa a reproduzir o vídeo, mas eles antecipam a variação de tamanho, então utilizam todo o espaço do contêiner e atribuem um fundo preto.
Aqui está o Dailymotion, por exemplo:
Acho que a coisa mais simples que podemos fazer aqui é dar ao iframe do Vimeo um fundo preto? Ficaria assim:
Precisamos de uma altura estática, caso contrário o layout ficaria tremendo enquanto a página carrega… não tenho certeza se podemos/deveríamos fazer algo mais sofisticado, como determinar a proporção de aspecto e ajustar as dimensões para telas menores (@techAPJ)?
É, vamos ficar com o fundo preto por enquanto.
A mesma coisa aconteceu com o Streamable.
