Reka Bentuk Laman Ber responsi - Video

Menggunakan properti width

Jika width Jika properti diatur kepada 100%, pemutar video akan bergerak dan disaizkan:

Contoh

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

Cuba Sendiri

Perhatikan bahawa dalam contoh di atas, pemutar video boleh diluaskan lebih besar daripada saiz asalnya. Dalam banyak kes, penyelesaian yang lebih baik adalah untuk mengguna properti max-width.

Menggunakan properti max-width

Jika max-width Jika properti diatur kepada 100%, pemutar video akan disaizkan proporsional dan tidak akan diluaskan lebih besar daripada saiz asalnya:

Contoh

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

Cuba Sendiri

Menambahkan video ke halaman contoh

Kami mengharapkan untuk menambahkan video ke halaman contoh. Video akan disesuaikan saiz supaya selalu mengambil semua ruang yang tersedia:

Contoh

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

Cuba Sendiri