Configurer le style vidéo natif

Découvrez les options associées aux styles natifs et consultez des exemples dans notre article sur les paramètres des styles natifs.

Lorsque vous définissez le style d'une annonce vidéo native, vous devez placer le lecteur vidéo dans un élément HTML (un tag div comportant la macro #%NATIVE_VIDEO_WRAPPER%# qui déclenche le lecteur) afin de maintenir ses proportions et de tenter d'occuper autant d'espace que possible à l'intérieur de cet élément. De ce fait, tenez compte des trois points ci-dessous lorsque vous définissez le style du format vidéo natif.

1. Spécifiez explicitement la taille du tag div qui contient le code d'accompagnement de la vidéo native.

La taille du tag div qui contient la macro #%NATIVE_VIDEO_WRAPPER%# doit être entièrement spécifiée en langage CSS, sous forme de pourcentage ou de pixels.

.host-div {
   width: 300px;
   height: 200px;
}

2. Tenez compte des proportions du tag div du conteneur et de la vidéo pour éviter l'apparition d'une marge interne.

Si les proportions du tag div du conteneur sont différentes de celles du lecteur vidéo, une marge interne est visible autour de la vidéo. Cette marge interne est transparente (dans les applications mobiles) ou noire (sur les sites Web pour mobile et pour ordinateur). L'exemple montre un tag div de conteneur dont les proportions (rapport largeur:hauteur) sont supérieures à celles de la vidéo. Pour éviter l'apparition d'une marge interne, vous devez créer un tag div de conteneur dont les proportions sont identiques à celles de la vidéo. Si les proportions de la vidéo sont connues à l'avance, les codes HTML et CSS ci-dessous permettent d'obtenir un tag div qui s'adapte parfaitement à la vidéo.

Exemple : proportions du tag div supérieures à celles de la vidéo

HTML

---

<div class="video-ratio-wrapper">
  <div class="video">
    #%NATIVE_VIDEO_WRAPPER%#
  </div>
</div>

CSS

---

.video-ratio-wrapper {
  position: relative;
  width: 100%;
}

.video-ratio-wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

.video {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

3. Découvrez de quelle manière les éléments HTML se superposent à votre lecteur vidéo.

Le lecteur vidéo intégré dans les applications mobiles apparaît toujours sous les autres éléments HTML. Ce comportement est voulu et permet à des éléments tels qu'un titre de se superposer à votre vidéo.

La configuration du z-index sur le tag div du conteneur n'a aucun effet sur ce comportement. Par ailleurs, si vous définissez la couleur d'arrière-plan du tag div du conteneur, le tag recouvre entièrement le lecteur vidéo.

Les éléments div qui enveloppent votre vidéo doivent être transparents. Si un tag div de conteneur comporte un arrière-plan non transparent, il se superpose à votre vidéo.

Le SDK vous permet de contrôler la couleur de la marge interne qui s'affiche autour de votre vidéo, tout en veillant à ce que le tag div du conteneur reste transparent. Pour ce faire, définissez le paramètre background-color sur l'élément "body" dans le code CSS. Le SDK utilise cette valeur comme couleur de la marge interne visible autour de la vidéo.

body {
  background-color: aliceblue;
}