Nativen Videostil konfigurieren - Google Ad Manager-Hilfe [gg-admanager-de]

Konfigurieren Sie den nativen Videostil

Erfahren Sie mehr über native Stiloptionen und sehen Sie sich Beispiele in unserer Dokumentation zu nativen Stileinstellungen an.

Wenn Sie den Stil für eine native Videoanzeige festlegen, sollte der Videoplayer in einem HTML-Element platziert werden (ein div mit dem Makro #%NATIVE_VIDEO_WRAPPER%# löst den Player aus), um das Seitenverhältnis des Players beizubehalten und zu versuchen, so viel zu belegen des Platzes innerhalb des Elements wie möglich. Aus diesem Grund sind beim Styling des nativen Videoformats drei wichtige Punkte zu beachten.

1. Geben Sie explizit die Größe des div an, das den nativen Video-Wrapper enthält

Die Größe des div -Elements, das das #%NATIVE_VIDEO_WRAPPER%# -Makro enthält, muss vollständig mit CSS angegeben werden, entweder in Prozent oder in Pixeln.

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

2. Achten Sie auf die Div-Verhältnisse von Videos und Containern, um Padding zu vermeiden

Wenn sich das Verhältnis des Container- div vom Verhältnis des Videoplayers unterscheidet, wird das Video umrandet. Die Farbe der Polsterung ist transparent (mobile App) oder schwarz (mobiles und Desktop-Web). Das Beispiel zeigt ein Container- div mit einem größeren Verhältnis von Breite zu Höhe als das Video. Um ein Container- div ohne Padding zu erstellen, muss es das gleiche Verhältnis wie das Video haben. Wenn das Seitenverhältnis des Videos im Voraus bekannt ist, funktioniert das folgende HTML und CSS gut, um ein div zu rendern, das perfekt zum Video passt.

Beispiel : Div-Verhältnis größer als Video

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

Der in mobilen Apps implementierte Videoplayer wird immer unter anderen HTML-Elementen gerendert. Dieses Verhalten ist beabsichtigt und ermöglicht, dass Elemente wie eine Überschrift Ihr Video überlagern.

Das Festlegen des Z-Index für das Container- div hat keine Auswirkung auf dieses Verhalten, und das Festlegen der Hintergrundfarbe des Container- div bewirkt, dass das div den gesamten Videoplayer abdeckt.

Alle div -Elemente, die Ihr Video umschließen, müssen transparent sein. Wenn ein Container- div einen nicht transparenten Hintergrund enthält, überlappt er Ihr Video.

Das SDK bietet eine Möglichkeit, die Farbe aller Polsterungen um Ihr Video herum zu steuern und gleichzeitig sicherzustellen, dass das Container- div transparent bleibt. Legen Sie dazu in Ihrem CSS die background-color Element fest. Das SDK verwendet diesen Wert als Farbe für alle Polsterungen um das Video herum.

  body { background-color: aliceblue; }