Latest web development tutorials

Web Desain Responsif - Video (Video)

Menggunakan atribut width

Jika atribut lebar diatur ke 100%, pemutar video akan secara otomatis disesuaikan secara proporsional dengan ukuran layar:

contoh

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

Coba »

Perhatikan bahwa dalam contoh di atas, pemutar video secara otomatis disesuaikan secara proporsional dengan ukuran layar dan dapat lebih besar dari ukuran aslinya. Lebih sering kita dapat menggunakan properti max-lebar sebagai gantinya.


Menggunakan max-width properti

Jika properti max-lebar diatur ke 100%, pemutar video akan secara otomatis disesuaikan secara proporsional dengan layar, tapi tidak lebih dari ukuran aslinya:

contoh

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

Coba »

Menambahkan halaman video

Kita dapat menambahkan video di halaman web. Contoh dan video berikut secara otomatis disesuaikan dengan daerah menempati seluruh ukuran div daerah div:

contoh

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

Coba »