Πώς να δημιουργήσετε: Απαντητικό Iframe

Μάθετε πώς να δημιουργήσετε απαντητικά iframe χρησιμοποιώντας CSS.

Απαντητικό iframe

Δημιουργία iframe που διατηρεί την αναλογία πλάτους και ύψους (4:3, 16:9 κ.λπ.)

Τι είναι η αναλογία πλάτους και ύψους;

Η αναλογία πλάτους και ύψους του στοιχείου περιγράφει τη σχέση μεταξύ πλάτους και ύψους του. Δύο κοινές αναλογίες βίντεο είναι 4:3 (κοινό μορφοποίημα βίντεο του 20ού αιώνα) και 16:9 (HD TV και ευρωπαϊκή ψηφιακή τηλεόραση καθώς και το κοινό μορφοποίημα βίντεο του YouTube).

How To - Εφαρμοσμένα Iframes

Βήμα 1 - Προσθήκη HTML:

Χρησιμοποιήστε στοιχεία κουτιού, όπως <div>, και προσθέστε iframe μέσα σε αυτά:

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

Βήμα 2 - Προσθήκη CSS:

για padding-top Προσθέστε ποσοστά τοποθέτησης, ώστε να διατηρείται η αναλογία πλάτους και ύψους του div κουτιού. Το παρακάτω παράδειγμα δημιουργεί ένα κουτί με αναλογία πλάτους και ύψους 16:9, η οποία είναι η προεπιλεγμένη αναλογία πλάτους και ύψους των βίντεο του YouTube.

παράδειγμα - αναλογία πλάτους και ύψους 16:9

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* αναλογία πλάτους και ύψους 16:9 (9 / 16 = 0.5625) */
{}
/* Μετά από đó ρυθμίστε το στυλ του iframe, ώστε να προσαρμόζεται πλήρως σε ύψος και πλάτος του div κουτιού */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
{}

Try it yourself

άλλες αναλογίες πλάτους και ύψους

παράδειγμα - αναλογία πλάτους και ύψους 4:3

.container {
  padding-top: 75%; /* αναλογία πλάτους και ύψους 4:3 */
{}

Try it yourself

παράδειγμα - αναλογία πλάτους και ύψους 3:2

.container {
  padding-top: 66.66%; /* αναλογία πλάτους και ύψους 3:2 */
{}

Try it yourself

παράδειγμα - αναλογία πλάτους και ύψους 8:5

.container {
  padding-top: 62.5%; /* αναλογία πλάτους και ύψους 8:5 */
{}

Try it yourself

παράδειγμα - 1:1 αναλογία πλάτους και ύψους (το ύψος και το πλάτος είναι πάντα ίσα)

.container {
  padding-top: 100%; /* 1:1 aspect ratio */
{}

Try it yourself