Como preencher um elemento de vídeo com uma imagem de pôster, mesmo se a imagem do pôster tiver uma proporção diferente do elemento de vídeo? [duplicado]
Esta questão já tem uma resposta aqui:
Faça o pôster de vídeo em HTML5 ter o mesmo tamanho que o próprio vídeo 11 respostasComo está agora, isso só é testado no WebKit.
Quando uma imagem de pôster é definida<video> elemento usando oposter atributo, essa imagem é exibida antes do usuário reproduzir o vídeo (comportamento padrão). No entanto, se a imagem do pôster tiver uma proporção diferente daquela do<video> elemento que é definido, espaço em branco (ou possivelmente espaço em preto) é visto em ambos os lados da imagem (esquerda e direita ou superior e inferior) e a imagem é centralizada (também, comportamento padrão).
Eu gostaria de saber como escalar essa imagem para cima (preferencialmente em CSS) para que ela preencha o elemento de vídeo, semelhante ao uso do CSS3background-size: cover; valor.
Ainda confuso? Talvez este JSFiddle ajude a explicar:http://jsfiddle.net/jonnymilano/2w2CE/
Eu também estaria interessado em respostas que forçaram a imagem no contêiner de vídeo, distorcendo sua altura e / ou largura para ajustar as dimensões do contêiner de vídeo. No entanto, esta resposta resolveria apenas parcialmente o meu problema.