Jadikan Semua Konten Tertanam Responsif dengan Reframe.js

Bagian tersulit tentang menanamkan video mendapatkan lebar & tinggi yang benar. Angka-angka ini menentukan rasio aspek dan ketika mereka pergi Anda akan dapatkan pemutar video yang miring.

Ini adalah berlaku untuk semua elemen yang disematkan seperti iframe dan widget media sosial. Dan hal-hal ini bisa lebih rumit dengan desain responsif karena biasanya bukan elemen responsif.

Tetapi dengan Reframe.js, kamu bisa membuat elemen apa pun yang responsif untuk rasio aspek apa pun.

Ini mungkin salah satu plugin JS paling sederhana namun paling berharga di web. Sebenarnya dibuat oleh Dollar Shave Club yang secara mengejutkan memiliki halaman GitHub sendiri.

Reframe adalah salah satu plugin gratis mereka dibangun untuk pengembang yang menginginkan cara yang lebih sederhana menangani konten tertanam yang responsif.

Pelakunya jelas adalah video tertanam dari situs-situs seperti YouTube dan Vimeo. Ini terkenal sulit untuk membuat elemen-elemen ini responsif tanpa hack CSS.

Dengan Reframe.js, Anda baru saja memilih elemen apa pun yang ingin Anda targetkan dan membingkai ulang itu menggunakan membingkai ulang () fungsi.

Mulailah dengan menambahkan plugin Reframe.js ke halaman web Anda. Kamu bisa unduh salinan dari GitHub, dan itu hanya 1KB yang diperkecil.

Lalu, Anda baru saja lulus fungsi pemilih untuk elemen apa pun yang Anda ingin membingkai ulang. Muat halaman dan boom! Anda harus siap.

Misalnya, katakanlah Anda memiliki beberapa video yang disematkan di situs Anda. Kamu bisa tambahkan kelas .video ke embed, dan gunakan itu sebagai pemilih. Reframe secara otomatis menambahkan div dan kelas di sekitarnya untuk menciptakan gaya responsif.

Jadi milikmu Kode JavaScript akan terlihat seperti ini:

membingkai ulang ('. video');

Cukup sederhana, benar?

Kode ini menargetkan semua elemen dengan kelas .video dan membuat mereka responsif. Tidak ada retasan tambahan, tidak ada CSS tambahan. Memang tidak ada yang salah dengan menggunakan metode CSS tetapi Anda harus melakukannya bungkus secara manual semua video tertanam dengan kelas tambahan.

Reframe saja menghemat langkah ekstra Anda dan membawa semuanya melalui JavaScript. Untuk lihat demo dan temukan beberapa cuplikan kode dasar, kunjungi beranda Reframe.js. Kamu bisa unduh salinan kode langsung dari repo GitHub.