Ρύθμιση στυλ εγγενούς βίντεο

Μάθετε σχετικά με τις επιλογές εγγενούς στιλ και δείτε παραδείγματα στην τεκμηρίωση ρυθμίσεων εγγενών στιλ.

Όταν ρυθμίζετε το στιλ για μια εγγενή διαφήμιση βίντεο, το πρόγραμμα αναπαραγωγής βίντεο θα πρέπει να τοποθετηθεί μέσα σε ένα στοιχείο HTML (ένα div με τη μακροεντολή #%NATIVE_VIDEO_WRAPPER%# ενεργοποιεί το πρόγραμμα αναπαραγωγής βίντεο) για να διατηρηθεί ο λόγος διαστάσεων του προγράμματος αναπαραγωγής και να επιχειρήσει να καταλάβει όσο το δυνατόν μεγαλύτερο μέρος του χώρου μέσα στο στοιχείο. Εξαιτίας αυτού, υπάρχουν τρία σημαντικά σημεία που πρέπει να θυμάστε όταν διαμορφώνετε το στιλ της μορφής εγγενών βίντεο.

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. Αυτή η συμπεριφορά είναι σκόπιμη και επιτρέπει σε στοιχεία, όπως μια επικεφαλίδα, να επικαλύψουν το βίντεό σας.

Η ρύθμιση του δείκτη Ζ στο div κοντέινερ δεν επηρεάζει αυτήν τη συμπεριφορά και ο καθορισμός του χρώματος φόντου του div κοντέινερ θα προκαλέσει την κάλυψη ολόκληρου του προγράμματος αναπαραγωγής βίντεο από το div.

Όλα τα στοιχεία div που περιτυλίγουν το βίντεό σας θα πρέπει να είναι διαφανή. Εάν ένα div κοντέινερ περιέχει ένα φόντο που δεν είναι διαφανές, θα επικαλύψει το βίντεό σας.

Το SDK παρέχει έναν τρόπο ελέγχου του χρώματος οποιασδήποτε αναπλήρωσης γύρω από το βίντεό σας, διασφαλίζοντας ταυτόχρονα ότι το div κοντέινερ παραμένει διαφανές. Για να το κάνετε αυτό, ρυθμίστε το background-color του στοιχείου σώματος στο CSS. Το SDK χρησιμοποιεί αυτήν την τιμή ως χρώμα οποιασδήποτε αναπλήρωσης γύρω από το βίντεο.

body {
  background-color: aliceblue;
}