Как настроить стиль нативной видеорекламы

Получить более подробную информацию о нативных стилях и ознакомиться с примерами можно в нашем Справочном центре.

Настраивая стиль нативного видеообъявления, поместите код видеопроигрывателя в элемент HTML (проигрыватель запускается блоком div с макросом #%NATIVE_VIDEO_WRAPPER%#). Это позволит сохранить соотношение сторон проигрывателя и обеспечит оптимальное размещение контента внутри элемента HTML. При использовании стилей нативных объявлений соблюдайте три важных требования, приведенные ниже.

1. Указывайте размер элемента div, который содержит контейнер нативного видеообъявления.

Размер блока div, содержащего макрос #%NATIVE_VIDEO_WRAPPER%#, должен быть точно указан с помощью CSS в процентах или пикселях.

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

2. Проверьте соотношение сторон в видео и в блоке div, чтобы избежать появления полей.

Если соотношение сторон для блока div отличается от соотношения сторон проигрывателя видео, вокруг видео появятся поля, которые будут прозрачными (в мобильных приложениях) или черными (на мобильных и обычных сайтах). В этом примере отношение ширины к высоте у контейнера div больше, чем у видео. Чтобы полей не было, контейнер div должен иметь такое же соотношение сторон, как видео. Если соотношение сторон видео известно заранее, можно использовать следующие HTML и CSS, чтобы блок div полностью совпадал с ним:

Пример: соотношение сторон у контейнера div больше, чем у видео.

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. Помните о наложении элементов HTML.

Проигрыватель видео, реализованный в мобильных приложениях, всегда обрабатывается под прочими элементами HTML. Это сделано намеренно, чтобы объекты, например заголовок, могли накладываться на видео.

Z-index в контейнере div не влияет на эту закономерность, а при установке цвета фона для контейнера div он закроет собой весь проигрыватель видео.

Любые элементы div, в которые заключено ваше видео, должны быть прозрачными. Если для контейнера div установлен непрозрачный цвет фона, он закроет все видео.

SDK позволяет контролировать цвет полей вокруг видео, сохраняя прозрачность контейнера div. Для этого установите цвет background-color для элемента body в CSS. SDK будет использовать это значение как цвет полей вокруг видео.

body {
  background-color: aliceblue;
}