Supprimer l'espacement en haut et en bas d'une vidéo hébergée au format 9:16 à l'aide d'un code personnalisé

Lorsque vous utilisez Hébergement vidéo dans une bannière de héros et définissez le format d'image de la vidéo à 9:16Vous remarquerez peut-être un espace vide en haut et en bas de la vidéo.

Cela se produit car la vidéo ne remplit pas complètement le conteneur disponible tout en conservant son format d'image d'origine.

Vous pouvez utiliser Code personnalisé pour que la vidéo remplisse entièrement la bannière du héros et supprime ces espaces vides.

Étape 1 : Ouvrez le panneau Code personnalisé

Dans l'éditeur GemPages, repérez le Bannière de héros qui contient votre vidéo hébergée.

Puis, clic droit sur l'élément Bannière du héros et sélectionnez Code personnalisé.

Étape 2 : Collez le code CSS

Collez le code suivant dans le Code personnalisé du kit:

gp-hero-banner .hero-banner-bg gp-lite-html5-embed vidéo {

  hauteur : 100 % !important ;

  object-fit: couvrir !important;

}

Étape 3 : Appliquer les modifications

Cliquez à nouveau Appliquer pour enregistrer le code personnalisé.

Enregistrez et publiez votre page pour vérifier que la vidéo remplit désormais la bannière principale sans laisser d'espace vide en haut ou en bas.