ดูข้อมูลเกี่ยวกับตัวเลือกสไตล์โฆษณาเนทีฟและดูตัวอย่างในเอกสารการตั้งค่าสไตล์โฆษณาเนทีฟ
เมื่อคุณตั้งค่าสไตล์สำหรับโฆษณาวิดีโอเนทีฟ จะมีการวางวิดีโอเพลเยอร์ไว้ในองค์ประกอบ 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 ใหญ่กว่าวิดีโอ |
<div class="video-ratio-wrapper"> <div class="video"> #%NATIVE_VIDEO_WRAPPER%# </div> </div>
.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; }