CSS RWD Videos

Halo sana, para pemaju web masa depan! Hari ini, kita akan melihat dunia yang menarik desain web responsif (RWD) dan bagaimana ia diterapkan kepada video. Sebagai guru komputer tetangga yang ramah, saya di sini untuk menghidahkan anda dalam perjalanan ini, langkah demi langkah. Jadi, ambil minuman kesukaan anda, duduk selesa, dan mari kita mulakan pengembaraan ini bersama!

CSS RWD Videos - Properti width

Mari kita mulakan dengan dasar. Pada saat membuat video responsif, properti width adalah pertahanan pertama kita. Ia membolehkan kita mengawal seberapa luas video muncul di berbagai saiz skrin.

Ini adalah contoh yang mudah:

<style>
video {
width: 100%;
}
</style>

<video controls>
<source src="myvideo.mp4" type="video/mp4">
Pelayar anda tidak menyokong tag video.
</video>

Dalam contoh ini, kita menetapkan width video kepada 100% daripada penampungnya. Ini bermakna video akan diperpanjang untuk mengisi keseluruhan width mana pun elemen yang ia didalamnya, sama ada keseluruhan skrin atau penampung yang lebih kecil.

Tunggu, ada lagi! Mari kita lihat contoh yang sedikit lebih kompleks:

<style>
.video-container {
width: 80%;
margin: 0 auto;
}
video {
width: 100%;
}
</style>

<div class="video-container">
<video controls>
<source src="myvideo.mp4" type="video/mp4">
Pelayar anda tidak menyokong tag video.
</video>
</div>

Di sini, kita telah membungkus video kita dalam div penampung. Penampung ini di tetapkan kepada 80% width daripada penampungnya dan dikesan menggunakan margin: 0 auto. Video itu sendiri masih 100% width, tetapi sekarang ia 100% width penampung, bukan keseluruhan width skrin.

CSS RWD Videos - Properti max-width

Sekarang, mari kita bicarakan tentang properti max-width. Ini seperti menetapkan had kelajuan untuk pertumbuhan video anda. Ia menghalang video daripada menjadi terlalu besar di skrin yang besar.

<style>
video {
width: 100%;
max-width: 800px;
display: block;
margin: 0 auto;
}
</style>

<video controls>
<source src="myvideo.mp4" type="video/mp4">
Pelayar anda tidak menyokong tag video.
</video>

Dalam contoh ini, video akan tumbuh bersama saiz skrin sehingga mencapai maximum 800px wide. Selepas itu, ia akan berhenti tumbuh. Ini terutamanya berguna untuk mengekalkan kualiti video di skrin besar.

Ini adalah tip profesional dari tahun-tahun pengajaran saya: Sentiasa pertimbangkan nisbah aspek video anda saat menetapkan max-width. Anda tidak mahu video anda terlihat gepeng atau diperpanjang!

CSS RWD Videos - Dalam Grid

Sekarang, mari kita tingkatkan dan meletakkan video responsif kita dalam susun atur grid. Ini adalah di mana hal-hal menjadi sangat menarik!

<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.video-item {
background-color: #f0f0f0;
padding: 20px;
border-radius: 10px;
}
video {
width: 100%;
display: block;
}
</style>

<div class="grid-container">
<div class="video-item">
<video controls>
<source src="video1.mp4" type="video/mp4">
Pelayar anda tidak menyokong tag video.
</video>
<p>Video 1 Description</p>
</div>
<div class="video-item">
<video controls>
<source src="video2.mp4" type="video/mp4">
Pelayar anda tidak menyokong tag video.
</video>
<p>Video 2 Description</p>
</div>
<!-- Tambahkan item video lainnya jika diperlukan -->
</div>

Contoh ini menciptakan susun atur grid video yang responsif. Properti grid-template-columns dengan repeat(auto-fit, minmax(300px, 1fr)) adalah kunci kesini. Ia menciptakan sebanyak mungkin kolom yang mampu, dengan setiap kolom sekurang-kurangnya 300px wide.

Setiap video terdapat dalam div video-item sendiri, yang termasuk video dan deskripsi. Video itu sendiri masih tetap 100% width, memastikan mereka mengisi penampung mereka.

Sekarang, mari kita ringkaskan metode utama yang telah kita diskusikan dalam jadual praktis:

Metode	Deskripsi	Gunakan Untuk
width: 100%	Membuat video mengisi penampungnya	Video responsif dasar
max-width	Menghadkan saiz maksimum video	Menghalang video daripada menjadi terlalu besar
Susun Atur Grid	Mengatur beberapa video secara responsif	Membuat galeri video

Ingat, desain web responsif adalah tentang menciptakan pengalaman yang lancar di semua peranti. Itu seperti menjadi tuan rumah yang baik di sebuah parti - anda mahu semua tetamu (pengguna) merasa selesa, tanpa mengira peranti apa yang mereka gunakan untuk melihat laman anda.

Saat kita mengakhiri, saya ingin berkongsi cerita pendek. Ketika saya pertama kali mengajar desain responsif, saya ada seorang murid yang kesulitan untuk memahaminya. Suatu hari, dia datang ke kelas dengan sebuah karet. Dia memanjangkannya dan berkata, "Adakah ini seperti desain responsif?" Dan tahu apa? Dia benar! Desain responsif adalah tentang kefleksibelan dan adaptabiliti, seperti karet itu.

Jadi, saat anda teruskan perjalanan anda dalam pengembangan web, selalu ingat karet itu. Desain anda harus menyelesaikan dan menyesuaikan diri untuk muat ke mana-mana saiz skrin, seperti video responsif kita.

Selamat coding, para ahli web masa depan!

Credits: Image by storyset