กำหนดค่าสไตล์โฆษณาวิดีโอเนทีฟ

ดูข้อมูลเกี่ยวกับตัวเลือกสไตล์โฆษณาเนทีฟและดูตัวอย่างในเอกสารการตั้งค่าสไตล์โฆษณาเนทีฟ

เมื่อคุณตั้งค่าสไตล์สำหรับโฆษณาวิดีโอเนทีฟ จะมีการวางวิดีโอเพลเยอร์ไว้ในองค์ประกอบ HTML (div ที่มีมาโคร #%NATIVE_VIDEO_WRAPPER%# จะทริกเกอร์วิดีโอเพลเยอร์) เพื่อรักษาอัตราส่วนของวิดีโอเพลเยอร์และพยายามครอบคลุมพื้นที่ภายในองค์ประกอบให้ได้มากที่สุด ด้วยเหตุนี้ โปรดคำนึงถึง 3 สิ่งต่อไปนี้ระหว่างที่คุณกำหนดสไตล์ให้รูปแบบวิดีโอเนทีฟ

1. ระบุขนาดของ div ที่มี Wrapper ของวิดีโอเนทีฟให้ชัดเจน

โปรดระบุขนาดของ div ที่มีมาโคร #%NATIVE_VIDEO_WRAPPER%# โดยละเอียดด้วย CSS โดยจะระบุเป็นเปอร์เซ็นต์หรือพิกเซลก็ได้

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

2. กำหนดอัตราส่วน div ของวิดีโอและคอนเทนเนอร์ด้วยความระมัดระวังเพื่อหลีกเลี่ยง Padding

หากอัตราส่วน div ของคอนเทนเนอร์นั้นต่างจากอัตราส่วนของวิดีโอเพลเยอร์ จะมี Padding ปรากฏขึ้นรอบๆ วิดีโอ สีของ Padding จะเป็นสีใส (แอปในอุปกรณ์เคลื่อนที่) หรือสีดำ (เว็บในอุปกรณ์เคลื่อนที่และทางเดสก์ท็อป) ตัวอย่างนี้แสดง div ของคอนเทนเนอร์ที่มีอัตราส่วน "ความกว้าง:ความสูง" ที่ใหญ่กว่าวิดีโอ หากต้องการสร้าง div ของคอนเทนเนอร์ที่ไม่มี Padding คอนเทนเนอร์จะต้องมีอัตราส่วนเท่ากับวิดีโอ หากคุณทราบอัตราส่วนของวิดีโอล่วงหน้า 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 ใน div ของคอนเทนเนอร์จะไม่ส่งผลใดๆ ต่อลักษณะการทำงานนี้และการตั้งค่าสีพื้นหลังของ div ของคอนเทนเนอร์จะทำให้ div ครอบคลุมวิดีโอเพลเยอร์ทั้งหมด

องค์ประกอบ div ใดๆ ที่รวมวิดีโอของคุณจะต้องมีสีที่โปร่งใส หาก div ของคอนเทนเนอร์มีพื้นหลังที่ไม่โปร่งใส องค์ประกอบดังกล่าวจะซ้อนทับวิดีโอของคุณ

SDK ช่วยคุณควบคุมสีของ Padding รอบๆ วิดีโอ พร้อมทำให้ div ของคอนเทนเนอร์มีความโปร่งใสอยู่ต่อไป หากต้องการทำเช่นนี้ ให้ตั้งค่า background-color ในองค์ประกอบเนื้อหาใน CSS โดย SDK จะใช้ค่านี้เป็นสีของ Padding รอบๆ วิดีโอ

body {
  background-color: aliceblue;
}