Remova o espaçamento superior e inferior de um vídeo hospedado de 9:16 usando código personalizado.

Quando você usa Hospedagem de Vídeo em um banner de herói e defina a proporção da tela do vídeo para 9:16Você poderá notar espaços vazios na parte superior e inferior do vídeo.

Isso acontece porque o vídeo não preenche completamente o espaço disponível, mantendo sua proporção original.

Você pode usar Código personalizado para que o vídeo preencha todo o banner do herói e remova esses espaços vazios.

Passo 1: Abra o painel de Código Personalizado

No editor GemPages, localize o Bandeira de herói que contém o seu vídeo hospedado.

Em seguida, Clique com o botão direito do mouse no elemento Estandarte do Herói. e selecione Código personalizado.

Passo 2: Cole o código CSS

Cole o seguinte código no Código personalizado caixa:

gp-hero-banner .hero-banner-bg gp-lite-html5-embed video {

  altura: 100% !importante;

  object-fit: cobrir !importante;

}

Passo 3: Aplique as alterações

Clique Inscreva-se Para salvar o código personalizado.

Salve e publique sua página para verificar se o vídeo agora preenche o banner principal sem deixar espaço vazio na parte superior ou inferior.