Embed Video Responsif dengan Mudah dengan SuperEmbed.js

Web moden adalah responsif sepenuhnya dan lebih banyak pereka menyedari ini setiap hari. Tetapi ada satu cabaran besar ketika datang ke rancangan responsif: kandungan tertanam.

Setiap laman video dari YouTube ke Vimeo mempunyai a kod benam lalai ditetapkan pada saiz tertentu. Ini bermakna pemaju perlu menggunakan penyelesaian lain untuk membuat video responsif sepenuhnya.

Walau bagaimanapun, daripada menggunakan kelas kontena CSS, anda boleh menggunakannya SuperEmbed.js, perpustakaan JavaScript percuma untuk membuat video responsif.

Plugin ini menyelesaikan dua masalah sekaligus. Semua video terbenam akan meregang untuk mengisi bekas utama, sementara juga cukup fleksibel saiz semula berdasarkan tetingkap penyemak imbas.

Bahagian yang terbaik ialah SuperEmbed.js tidak memerlukan kod tambahan, jadi anda boleh membenamkan fail dan biarkan mereka berlari. Perpustakaan JS ini menjaga selebihnya oleh mensasarkan unsur tertanam dari laman web tertentu.

Semua video mengekalkan nisbah aspek tertentu mereka, jadi anda tidak perlu risau tentang dimensi yang diminati. Dan SuperEmbed berfungsi sebagai perpustakaan JS vanila dengan tiada kebergantungan seperti jQuery.

Sekarang, SuperEmbed menyokong 15+ video embeds dari laman web seperti YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me, dan Archive.org (antara yang lain). Senarai ini ialah masih berkembang, jadi harapkan lebih banyak perkhidmatan penstriman video untuk ditambah dari masa ke masa.

Untuk mendapatkan alat ini berfungsi, anda hanya perlu muat turun perpustakaan dan tambahnya ke tajuk tapak anda seperti itu:

Anda boleh memuat turun a menyalin sepenuhnya dari repo GitHub yang juga termasuk spesifikasi untuk laman video yang disokong dan sokongan penyemak imbas semasa.

Untuk sebahagian besar, SuperEmbed menyokong semua pelayar moden dari FireFox 3.5+, Chrome 4+, dan versi Internet Explorer 9 atau yang lebih tinggi.

Ini adalah perpustakaan yang mengagumkan yang mengingati semua sokongan penyemak imbas dan seberapa baiknya berfungsi keluar dari kotak. Ini penyelesaian yang lebih mudah daripada hacks CSS jika anda okay dengan bergantung kepada JavaScript.

Awak boleh cari maklumat lanjut di GitHub dan anda boleh melihatnya hidup berjalan dalam biola ini.