Pada tutorial kali ini saya akan memberikan materi tutorial bagaimana Cara Responsive Video Dengan Superembed.js, untuk melakukan hal tersbut kita menggunakan jquery plugin yang bernama superembed.js.
Plugin ini memecahkan dua masalah sekaligus. Semua video yang di embed akan meregang untuk mengisi wadah utama, sekaligus cukup fleksibel untuk disesuaikan ukurannya berdasarkan jendela peramban.
Bagian yang terbaik adalah SuperEmbed.js tidak memerlukan kode tambahan, jadi Anda bisa menyematkan file dan membiarkannya berjalan. Library JS ini menangani sisanya dengan menargetkan elemen tertanam dari situs tertentu.
Semua video mempertahankan rasio aspek spesifiknya, sehingga Anda tidak perlu khawatir dengan dimensi miring. Dan SuperEmbed bekerja sebagai Library JS vanili tanpa ketergantungan seperti jQuery.
Saat ini, SuperEmbed mendukung 15+ embeds video dari situs seperti YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me, dan Archive.org (di antara banyak lainnya). Daftar ini masih berkembang, sehingga diharapkan lebih banyak layanan streaming video yang akan ditambah dari waktu ke waktu.
Agar alat ini berfungsi, Anda hanya perlu mendownload Library dan menambahkannya ke header situs Anda seperti:
<script src="js/superembed.min.js"></script>Anda bisa mendownloadnya melalui repository di GITHUB ini -> Download
Baik setelah itu kita langsung saja mencobanya :
<!DOCTYPE html> <html> <head> <title>responsive Embed jquery</title> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22superembed.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> </head> <body> <iframe width="560" height="315" src="https://www.youtube.com/embed/2XkV6IpV2Y0" frameborder="0"></iframe> </div> </body> </html>
hasilnya akan seperti ini :
Jadi seperti itulah artikel tutorial Cara Responsive Video Dengan Superembed.js, semoga bermanfaat dan sampai bertemu pada artikel selanjutnya.
The post Cara Responsive Video Dengan Superembed.js appeared first on Kursus Website Terbaik.