Desain Web Responsif - Video
Menggunakan Properti lebar
Jika widthproperti disetel ke 100%, pemutar video akan responsif dan ditingkatkan dan diturunkan:
Contoh
video {
width: 100%;
height: auto;
}
Perhatikan bahwa pada contoh di atas, pemutar video dapat ditingkatkan menjadi lebih besar dari ukuran aslinya. Solusi yang lebih baik, dalam banyak kasus, adalah menggunakan
max-widthproperti sebagai gantinya.
Menggunakan Properti max-width
Jika max-widthproperti disetel ke 100%, pemutar video akan diperkecil jika perlu, tetapi tidak pernah memperbesar lebih besar dari ukuran aslinya:
Contoh
video {
max-width: 100%;
height: auto;
}
Tambahkan Video ke Halaman Web Contoh
Kami ingin menambahkan video di halaman web contoh kami. Video akan diubah ukurannya untuk selalu menggunakan semua ruang yang tersedia:
Contoh
video {
width: 100%;
height: auto;
}