네이티브 동영상 스타일 구성

네이티브 스타일 설정 설명서에서 네이티브 스타일 옵션을 알아보고 예를 확인하세요.

네이티브 동영상 광고의 스타일을 설정하는 경우 동영상 플레이어에서 가로 세로 비율을 유지하고 요소 내에서 최대한 많은 공간을 차지하도록 하려면 해당 플레이어를 HTML 요소(#%NATIVE_VIDEO_WRAPPER%# 매크로가 있는 div로 인해 플레이어가 트리거됨) 내에 배치해야 합니다. 이러한 이유로 네이티브 동영상의 스타일을 지정할 때는 세 가지 중요한 사항을 기억해야 합니다.

1. 기본 동영상 래퍼를 포함하는 div 크기를 명시적으로 지정

#%NATIVE_VIDEO_WRAPPER%# 매크로를 포함하는 div 크기가 비율 또는 픽셀을 사용하는 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 요소 아래에서 렌더링합니다. 이 동작은 의도적이며 광고 제목과 같은 요소가 동영상을 오버레이하도록 허용합니다.

컨테이너 div에 z-색인을 설정하는 것은 이 동작에 영향을 미치지 않으며 컨테이너 div의 배경 색상을 설정하면 div가 전체 동영상 플레이어를 처리할 수 있습니다.

동영상을 래핑하는 모든 div 요소는 투명해야 합니다. 컨테이너 div가 투명하지 않은 배경을 포함하면 동영상과 겹칩니다.

SDK는 컨테이너 div가 투명하게 유지되도록 하는 동시에 동영상 주위의 패딩 색상을 제어하는 방법을 제공합니다. 이렇게 하려면 CSS의 본문 요소에 background-color를 설정하세요. SDK가 이 값을 동영상 주위의 패딩 색상으로 사용합니다.

body {
  background-color: aliceblue;
}