Eliminar el espacio superior e inferior de un video alojado en formato 9:16 mediante Código Personalizado

Cuando se utiliza Video Hosting (Alojamiento de video) en un Banner de Hero y se establece la relación de aspecto del video en 9:16, es posible que note espacio vacío en la parte superior e inferior del video.

Esto ocurre porque el video no llena completamente el contenedor disponible mientras mantiene su relación de aspecto original.

Puede utilizar el Código Personalizado para hacer que el vídeo ocupe todo el Hero Banner y eliminar estos espacios vacíos.

Paso 1: Abrir el panel de Código personalizado

En el editor de GemPages, localice el elemento Banner de Hero que contiene su video alojado.

A continuación, haga clic con el botón derecho en el elemento Banner de Hero y seleccione Código Personalizado.

Paso 2: Pegar el código CSS

Pegue el siguiente código en el cuadro de Código Personalizado :

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

  altura: 100% !importante;

  object-fit: cubrir !important;

}

Paso 3: Aplicar los cambios

Haga clic en Aplicar para guardar el Código personalizado.

Guarde y publique su página para verificar que el video ahora ocupa todo el Banner de hero sin dejar espacio vacío en la parte superior ni en la inferior.