Natives Videodesign konfigurieren

Informationen zu den Optionen für native Designs und Beispiele finden Sie in unserer Dokumentation zu den Einstellungen für native Designs.

Wenn Sie das Design einer nativen Videoanzeige festlegen, sollte der Videoplayer in einem HTML-Element (ein div mit dem Makro #%NATIVE_VIDEO_WRAPPER%# löst den Player aus) platziert werden, damit das Seitenverhältnis des Players beibehalten und so viel Platz innerhalb des Elements wie möglich belegt wird. Aus diesem Grund sollten Sie bei der Gestaltung des nativen Videoformats drei wichtige Punkte beachten.

1. Geben Sie die Größe des div-Elements mit dem nativen Video-Wrapper explizit an

Die Größe des div-Elements mit dem #%NATIVE_VIDEO_WRAPPER%#-Makro muss vollständig in CSS angegeben werden, entweder als Prozentsatz oder als Pixelanzahl.

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

2. Achten Sie auf die Verhältnisse des Videos und Container-div-Elements, um die Randbildung zu verhindern

Wenn das Verhältnis des Container-div-Elements sich von dem des Videoplayers unterscheidet, erscheint um das Video ein Rand. Der Rand ist entweder transparent (mobile App) oder schwarz (Websites für Mobilgeräte und Desktop-Computer). In diesem Beispiel ist das Verhältnis (Breite:Höhe) des Container-div-Elements größer als das des Videos. Damit das Container-div-Element keinen Rand verursacht, muss es dasselbe Verhältnis wie das Video haben. Wenn Sie das Seitenverhältnis des Videos kennen, eignen sich die folgenden HTML- und CSS-Codes am besten, um ein div-Element zu rendern. Es passt mit ihnen perfekt ins Video.

Beispiel: div-Verhältnis größer als das des Videos

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. Achten Sie darauf, wie die HTML-Elemente Ihren Videoplayer überlappen

Ein Videoplayer, der in einer mobilen App implementiert ist, wird immer unter anderen HTML-Elementen gerendert. Dies ist gewollt, damit Elemente wie Überschriften auf Ihrem Video als Overlay angezeigt werden können.

Das Festlegen des Z-Index auf das Container-div-Element hat keinen Einfluss auf das eben beschriebene Verhalten. Wenn Sie für das Container-div-Element eine Hintergrundfarbe angeben, bedeckt das div-Element den gesamten Videoplayer.

Alle div-Elemente, die für Ihr Video als Wrapper genutzt werden, müssen transparent sein. Sollte ein Container-div-Element keinen transparenten Hintergrund haben, wird Ihr Video verdeckt.

Mit dem SDK können Sie die Farbe aller Ränder um Ihr Video steuern und gleichzeitig dafür sorgen, dass das Container-div-Element transparent bleibt. Hierzu muss die Hintergrundfarbe (background-color) im body-Element im CSS-Code festgelegt werden. Das SDK nutzt diesen Wert als Farbe für den Rand des Videos.

body {
  background-color: aliceblue;
}