Cara Membuat Video Embed Responsive Dengan Plugin jQuery mediaWrapper

Hallo teman-teman DUMET School, ketemu lagi dengan saya di tutorial DUMET School, pada tutorial kali ini saya akan membahas tentang bagaimana caranya membuat video embed menjadi responsive dengan menggunakan bantuan plugin jQuery mediaWrapper.js. Seperti yang kita ketahui untuk membuat video embed menjadi responsive sebetulnya kita bisa membuatnya dengan begitu mudah yaitu dengan menggunakan Framework CSS Bootstrap, nah tapi permasalahannya jika kita membuatnya tidak menggunakan Framework CSS Bootstrap, itu akan sulit sekali di lakukan. Nah teman-teman tidak perlu khawatir lagi di sini saya sudah siapkan Plugin jQuery yang berfungsi untuk membuat video embed menjadi responsive yaitu Plugin jQuery mediaWrapper. Untuk menggunakannya sangat mudah sekali, kalian bisa ikuti langkah-langkah nya di bawah ini.

Pertama teman-teman bisa buat satu file HTML dengan nama index.html, kemudian teman-teman bisa download terlebih dahulu file jQuery mediaWrapper nya, setelah kalian download kalian bisa include file jQuery mediaWrapper nya seperti gambar di bawah ini, dan jangan lupa include juga file jQuery Library nya dan script yang di butuhkan.

Selanjutnya kalian bisa buat satu Tag HTML <iframe> dan ambil code embed dari video yang ada di youtube, dan masukkan code embed tersebut di dalam Tag <iframe> tersebut. Dan jangan lupa tambahkan attribute class di dalam Tag <iframe> tersebut dengan nama .wrap. Berikut contohnya.

Kemudian coba kalian jalankan file index.html kalian masing-masing dan lihat hasilnya.

See the Pen MKqNKd by Dumet_School (@dumet_school) on CodePen.

Cukup mudah bukan teman-teman, nah buat teman-teman yang ingin mendownload keseluruhan baris program di atas, teman-teman bisa mendownload nya di link download di bawah ini.

Download

4 Februari 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat