Sematkan Video Responsif dengan Mudah dengan SuperEmbed.js

Web modern adalah sepenuhnya responsif dan semakin banyak desainer yang menyadari hal ini setiap hari. Tapi ada satu tantangan yang menyebalkan dalam hal desain responsif: konten tertanam.

Setiap situs video dari YouTube hingga Vimeo memiliki kode embed default ditetapkan ke ukuran tertentu. Ini berarti pengembang perlu menggunakan solusi lain untuk buat video yang sepenuhnya responsif.

Namun, alih-alih menggunakan kelas wadah CSS, Anda bisa menggunakan SuperEmbed.js, perpustakaan JavaScript gratis untuk membuat video responsif.

Plugin ini memecahkan dua masalah sekaligus. Semua video yang disematkan akan regangkan untuk mengisi wadah utama, sementara juga cukup fleksibel untuk mengubah ukuran berdasarkan jendela browser.

Bagian terbaiknya adalah SuperEmbed.js tidak memerlukan kode tambahan, jadi kamu bisa saja sematkan file dan biarkan mereka lari. Pustaka JS ini mengurus sisanya oleh menargetkan elemen yang disematkan dari situs tertentu.

Semua video mempertahankan rasio aspek spesifik mereka, jadi Anda tidak perlu khawatir tentang dimensi miring. Dan SuperEmbed berfungsi sebagai perpustakaan vanilla JS dengan tidak ada ketergantungan seperti jQuery.

Saat ini, SuperEmbed mendukung 15+ embed video dari situs-situs seperti YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me, dan Archive.org (di antara banyak lainnya). Daftar ini masih tumbuh, jadi harap lebih banyak layanan streaming video yang ditambahkan seiring waktu.

Agar alat ini berfungsi, Anda hanya perlu melakukannya unduh perpustakaan dan tambahkan ke tajuk situs Anda seperti itu:

Anda dapat mengunduh salinan lengkap dari repo GitHub yang juga mencakup spesifikasi untuk situs video yang didukung dan dukungan browser saat ini.

Untuk sebagian besar, SuperEmbed mendukung semua browser modern dari FireFox 3.5+, Chrome 4+, dan versi Internet Explorer 9 atau lebih tinggi.

Ini adalah perpustakaan yang sangat mengesankan mengingat semua dukungan browser dan seberapa baik itu bekerja tepat di luar kotak. Ini solusi yang jauh lebih sederhana daripada peretasan CSS jika Anda setuju dengan mengandalkan JavaScript.

Kamu dapat menemukan informasi lebih lanjut di GitHub dan Anda bisa melihatnya live running di biola ini.