A transparência discutida aqui se refere especificamente ao iFrame (elemento contêiner), não à transparência em nenhum vídeo que você carrega. No momento, o Vimeo não é compatível como canais alfa.
Neste artigo:
- Tela de fundo transparente
- Desligar a tela de fundo transparente
- Como aplicar uma cor de fundo personalizada ao iFrame
Tela de fundo transparente
Por padrão, a tela de fundo do iframe do player é transparente no Vimeo. Todos os elementos do player (playbar, botões, etc.) são fixados na imagem do vídeo, não no tamanho real do iframe.
Para evitar espaço em branco em uma incorporação, recomendamos escolher um tamanho de player que corresponda à proporção de tela nativa do seu vídeo. Por exemplo, se o vídeo original tiver uma proporção de tela de 16:9, você desejará incorporar o vídeo com dimensões que produzam uma proporção de tela de 16:9, como 800 x 450.
⚠️ Observação: as dimensões do player incorporado também podem ser influenciadas pelo estilo CSS estabelecido pela sua página. Para vídeos incorporados em um design responsivo, verifique se a altura e a largura estão ajustadas para manter a proporção de tela nativa do vídeo.
Desligar a tela de fundo transparente
Caso o player apareça de forma diferente da que esperava, você pode desativar a tela de fundo transparente.
- Para desativar o fundo transparente, adicione ?transparent=0 ao final da URL do player no seu código de incorporação. Esse parâmetro forçará um fundo iFrame preto e fixará os elementos do player nele, em vez da imagem do vídeo.
Exemplo de código de incorporação:
<iframe src="https://player.vimeo.com/video/137805268?transparent=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'
⚠️ Observação: se seu vídeo estiver definido com a configuração de privacidade Não listado, qualquer outro parâmetro deverá ser adicionado após o hash de privacidade (?h=913052c8ff) ao final da URL usando & em vez de ?. Veja aqui um exemplo do código iFrame de um vídeo não listado com o uso do parâmetro transparente:
<iframe src="https://
player.vimeo.com/
Como aplicar uma cor de fundo customizada ao iFrame
Em vez de transparência ou barras pretas, você pode escolher a cor exata que preenche seu iframe. Lembre-se de que você precisará visitar as configurações do player do seu vídeo para ajustar a cor do texto e a barra de reprodução dentro do player.
- Para aplicar uma cor de fundo específica, você precisará adicionar a seguinte propriedade de estilo inline ao seu código de incorporação iframe:
style="background-color: #FFFFFF"
FFFFFF é o valor hexadecimal da cor para branco, mas você pode pesquisar no banco de dados de código hexadecimal a cor desejada aqui- http://www.color-hex.com/
Exemplo de código de incorporação:
<iframe src="https://player.vimeo.com/video/236787722" style="background-color: #FFFFFF" width="1000" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
⚠️ Observação: não há como alterar a cor do quadro exibido enquanto o vídeo é carregado. Isso deve ser imperceptível para a maior parte do público, mas pode afetar os espectadores com conexões mais lentas à Internet.