Desain Web Berespon - Video

Menggunakan properti width

Jika width Properti diatur menjadi 100%, pemutar video akan merespon dan berkurang/berbesar:

Contoh

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

Coba Sendiri

Perhatikan bahwa di contoh di atas, pemutar video dapat dilbesarkan melebihi ukuran aslinya. Dalam banyak kasus, solusi yang lebih baik adalah menggunakan properti max-width.

Menggunakan properti max-width

Jika max-width Properti diatur menjadi 100%, pemutar video akan berkurang proporsional tetapi tidak akan dilbesarkan melebihi ukuran aslinya:

Contoh

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

Coba Sendiri

Menambahkan Video ke Halaman Contoh

Kami ingin menambahkan video ke halaman contoh. Video akan disesuaikan ukurannya supaya selalu mengambil semua ruang yang tersedia:

Contoh

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

Coba Sendiri