Προσαρμοσόμενος Προβολέας Ιστοσελίδας - Βίντεο

Χρήση της ιδιότητας width

Αν width Ορίζεται η ιδιότητα ως 100%，ο παίκτης βίντεο θα ανταποκριθεί και θα συρρικνώσει ή θα επεκταθεί:

Παράδειγμα

video {
  width: 100%;
  height: auto;
}

Δοκιμάστε το Εξ ολοκλήρου

Λάβετε υπόψη ότι στον παραπάνω παράδειγμα, ο παίκτης βίντεο μπορεί να μεγαλώσει πάνω από το αρχικό του μέγεθος. Σε πολλές περιπτώσεις, η καλύτερη λύση είναι να χρησιμοποιήσετε την ιδιότητα max-width.

Χρήση της ιδιότητας max-width

Αν ορίσετε max-width Ορίζεται η ιδιότητα ως 100%，ο παίκτης βίντεο θα συγχρονιστεί και θα συρρικνώσει ή θα επεκταθεί, αλλά δεν θα μεγαλώσει πάνω από το αρχικό του μέγεθος:

Παράδειγμα

video {
  max-width: 100%;
  height: auto;
}

Δοκιμάστε το Εξ ολοκλήρου

Προσθήκη βίντεο στην ιστοσελίδα παράδειγμα

Ελπίζουμε να προσθέσουμε βίντεο στην ιστοσελίδα παράδειγμα. Το βίντεο θα προσαρμοστεί σε μέγεθος ώστε να καταλαμβάνει πάντα όλο το διαθέσιμο χώρο:

Παράδειγμα

video {
  width: 100%;
  height: auto;
}

Δοκιμάστε το Εξ ολοκλήρου