Pada kesempatan kali ini saya akan menjelaskan cara menambahkan element dengan wrap() jquery. Perlu teman-teman ketahui sebelumnya, fungsi wrap() di jquery adalah untuk menambahkan element html baru secara otomatis dengan menggunakan fungsi jquery tersebut yang nantinya akan membungkus suatu element lain. Seperti pada contoh kasus disini, saya menambahkan embed video youtube melalui text editor yang ada di website saya, dikarenakan toolbar dari embed video tersebut hanya berbentuk <iframe>, tentunya hasil video yang tampil nantinya tidak sesuai harapan, seperti salah satu permasalahannya dimana video tersebut belum responsive, karena untuk menambahkan class video responsive youtube bootstrap melalui toolbar video embed di text editor cukup rumit, Selain itu dari plugin embed video tersebut belum menyediakan fasilitas add class. Terlihat seperti gambar berikut:
Seperti yang teman-teman lihat dari gambar tersebut, dimana pada kotak paste embed code here adalah tempat untuk memasukan kode hasil embed dari youtube, namun dari kode tersebut perlu ditambahkan satu buah element sebagai pembungkus dari <iframe> tersebut, yaitu element class <div class=”embed-responsive embed-responsive-16by9″> sehingga struktur pada html tersebut nantinya seperti berikut :
|
1 2 3 |
<div class="embed-responsive embed-responsive-16by9"> <iframe width="560" height="315" src="https://www.youtube.com/embed/lGWoGdRKph8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> |
Lantas bagaimana cara menambahkan element class tersebut ? sedangkan pada plugin embed video youtube seperti pada gambar di atas belum tersedia untuk menambahkan element class baru. Jadi mau tidak mau untuk menerapkan element class tersebut bisa memanfaatkan jquery, dengan demikian element class tersebut akan ditambahkan secara otomatis apabila website teman-teman di akses, meskipun pada saat teman-teman memasukan embed code video tidak menyertakan element class pembungkus tersebut. Untuk contohnya, teman-teman bisa ikuti tahapan saya di bawah ini :
Berikut Tahapannya
- Teman-teman buat terlebih dahulu satu buah file dengan nama index.html
- Jika sudah ketikan kode seperti di bawah ini
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cara Menambahkan Element Baru Dengan Jquery</title> </head> <body> <h2>Cara Menambahkan Element Baru Dengan Jquery<i class="fa fa-heart"></i></h2> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" charset="UTF-8"></script> <div class="container"> <div class="row"> <div class="col-sm-6"> <h3>Responsive 16:9</h3> <iframe width="560" height="315" src="https://www.youtube.com/embed/lGWoGdRKph8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> <div class="col-sm-6"> <h3>Responsive 4:3</h3> <iframe width="560" height="315" src="https://www.youtube.com/embed/lGWoGdRKph8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </div> </div> </body> </html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("iframe").wrap("<div class='embed-responsive embed-responsive-4by3'></div>"); }); </script> |
- Jika sudah teman-teman save terlebih dahulu file tersebut dan lihat hasilnya di browser.
- Jika teman-teman mengikuti tahapan yang saya berikan dengan benar, maka akan tampil seperti gambar berikut
- Seperti yang terlihat pada gambar tersebut, dimana teman-teman sudah berhasil melakukan penambahan element class tersebut dengan jquery.
Sampai disini penjelasan saya mengenai cara menambahkan element dengan wrap() jquery, semoga bermanfaat.