Định cấu hình kiểu video gốc

Tìm hiểu về các tùy chọn kiểu gốc và xem các ví dụ trong tài liệu tùy chọn cài đặt kiểu gốc của chúng tôi.

Khi bạn đặt kiểu cho quảng cáo video gốc, trình phát video phải được đặt bên trong một phần tử HTML (một div có macro #%NATIVE_VIDEO_WRAPPER%# kích hoạt trình phát) để duy trì tỷ lệ khung hình của trình phát và cố gắng chiếm không gian trong phần tử nhiều nhất có thể. Vì thế, bạn cần nhớ ba điểm quan trọng khi tạo kiểu định dạng video gốc.

1. Xác định rõ ràng kích thước của div chứa trình bao bọc video gốc

Kích thước của div chứa macro #%NATIVE_VIDEO_WRAPPER%# phải được chỉ định đầy đủ với CSS, ở đơn vị phần trăm hoặc pixel.

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

2. Chú ý đến tỷ lệ video và vùng chứa div để tránh khoảng đệm

Nếu tỷ lệ vùng chứa div khác với tỷ lệ của trình phát video, thì khoảng đệm sẽ xuất hiện xung quanh video. Màu của khoảng đệm là trong suốt (trên ứng dụng dành cho thiết bị di động) hoặc màu đen (trên web dành cho thiết bị di động và máy tính để bàn). Ví dụ minh họa vùng chứa div có tỉ lệ chiều rộng:chiều cao lớn hơn so với video. Để tạo vùng chứa div không có khoảng đệm thì vùng đệm cần phải có cùng tỷ lệ với video. Nếu biết trước tỷ lệ co của video, HTML và CSS sau đây sẽ hữu ích để hiển thị div hoàn toàn khớp với video.

Ví dụ: tỷ lệ div lớn hơn 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. Hiểu cách thức các phần tử HTML chồng lên trình phát video

Trình phát video được triển khai trong ứng dụng dành cho thiết bị di động luôn hiển thị bên dưới các phần tử HTML khác. Hành vi này là có chủ định và cho phép các phần tử, như dòng tiêu đề, chồng lên video.

Việc đặt chỉ mục z trên vùng chứa div không ảnh hưởng đến hành vi này và việc đặt màu nền cho vùng chứa div sẽ khiến div bao phủ toàn bộ trình phát video.

Mọi phần tử div bao bọc video đều phải trong suốt. Nếu vùng chứa div chứa nền không trong suốt thì vùng này sẽ chồng lên video.

SDK cung cấp cách thức kiểm soát màu của bất kỳ khoảng đệm nào xung quanh video, đồng thời đảm bảo rằng vùng chứa div vẫn trong suốt. Để thực hiện việc này, hãy đặt background-color cho phần tử nội dung trong CSS. SDK sử dụng giá trị này làm màu của bất kỳ khoảng đệm nào xung quanh video.

body {
  background-color: aliceblue;
}