Bikin Fitur Embed Video dan Foto ala jQuery

Jika Anda menggunakan Facebook pasti pernah melihat atau mencoba ketika mem-posting Status berupa link video youtube. Apa yang terjadi? Setelah kita update, ternyata link video youtube akan tampil atau ter-embed berupa video pada dinding Status Anda. Kita juga bisa membuat fitur embed video seperti pada Facebook dengan bantuan plugin jQuery, nama pluginnya adalah Oembed yang bisa didownload secara gratis di http://code.google.com/p/jquery-oembed/.


Oembed sendiri adalah format yang memungkinkan representasi yang di embed dari url pada situs pihak ketiga. API (Application Programming Interface) Oembed memungkinkan sebuah website untuk menampilkan konten yang di embed (seperti video atau foto) ketika pengguna mem-posting link ke sumber tersebut, tanpa harus mengurai sumbernya secara langsung. Untuk menyingkat tulisan pada posting ini, silahkan download source code-nya dulu melalui link berikut:


[ DOWNLOAD SOURCE CODE ]


Sebelum mencoba skripnya, pastikan komputer Anda terkoneksi ke Internet, karena skrip tersebut akan langsung mengambil url dari situs sumber aslinya di Internet. Sekarang coba jalankan skrip oembed.html, lalu isikan link video youtube, misalnya http://www.youtube.com/watch?v=M-mf5IyVIAc. Lihat gambar berikut:


embed-url


Kemudian tekan tombol TAB di keyboard atau klik diluar form input, maka akan tampil video youtube sesuai dengan link yang kita masukkan (embed), dalam contoh ini hasil embed videonya adalah video Batman. Lihat gambar berikut:


embed-video-youtube


Dalam contoh lainnya, kita bisa juga mencoba memasukkan url foto dari situs flickr, misalnya http://www.flickr.com/photos/thefella/6148964692/, lalu tekan tombol TAB di keyboard, maka akan tampil foto yang sesuai dengan link yang kita masukkan (embed), dalam contoh ini adalah foto menara eiffel. Lihat gambar berikut:


embed-foto-flickr


(Sumber Buku : Membuat Sendiri Website Pertemanan dengan PHP dan jQuery oleh Akhmad Dharma)

Baca Juga

56 Komentar

  • Imam | 20 Oktober 2012 - 04:45:32 WIB

    bagus.. bagus.. ke TKP dl.

  • iwan pijay | 20 Oktober 2012 - 06:39:29 WIB

    Materi baru,, dapat komen nomor kedua lagi,, he,heeeeeee

  • sukma | 20 Oktober 2012 - 07:53:01 WIB

    bagus banget nih, lokomedia berkembang terus yah

  • adi | 20 Oktober 2012 - 08:26:13 WIB

    Pak Lukman bukunya hari sudah jadi belon ane mau beli,..

  • berita terbaru | 20 Oktober 2012 - 12:05:40 WIB

    makasih gan infonya berguna sekali

  • fortuner suv terbaik | 20 Oktober 2012 - 12:13:05 WIB

    waaah terimakasih banyak pak, kebetulan saya lagi nyari informasi ini makasih banget

  • berita terbaru | 20 Oktober 2012 - 12:19:35 WIB

    selalu memberikan inspirasi inspirasi yang baik dan update
    thnks sekali dan webnya keren abizz

  • Lowongan Keja Terbaru | 20 Oktober 2012 - 14:05:57 WIB

    Sukses Selalu Buat Lokomedia, saya bantyak mendapatkan inspirasi dan pengetahuan dari BukuLokomedia.com.

  • Berita Karir | 20 Oktober 2012 - 14:13:08 WIB

    Sukses Selalu Buat Lokomedia, selalu terdepan dalam memberikan ilmu - ilmu baru.

  • Epi | 21 Oktober 2012 - 15:35:52 WIB

    Terimakasih atas informasinya...btw, udah ada buku baru lagi g Pak?

  • Irham | 21 Oktober 2012 - 21:33:45 WIB

    Bagus ni ilmu'a wat tambah2 koleksi dn dikembangkan lagi,,, bwt pak lukman segera dund buku yang tanggal 20 oktobernya dikeluarkan yang judul'a "MEMBUAT WEBSITE PERTEMANAN DENGAN PHP DAN MYSQL" yang seperti facebook itu lho pak... segera launching ya pak.. thx semangat terus wat lokomedia

  • Fuad | 22 Oktober 2012 - 06:15:12 WIB

    Sebetulnya semua trik membuat website jejaring sosial ala facebook sudah dijelaskan secara lengkap berserta download sourcenya di website http://www.9lessons.info/ , namun disediakan dalam bentuk aplikasi yang terpisah2, tapi thanks to Akhmad Dharma yang sudah meramunya menjadi satu web utuh :-) sukses buat bukunya

  • download aplikasi web untuk TA dan skripsi | 22 Oktober 2012 - 17:02:57 WIB

    patut di coba. terimkasih. Mantap.

  • fuad | 22 Oktober 2012 - 18:01:45 WIB

    Mungkin bisa sebagai referensi tambahan Facebook Wall Script 3.0 with PHP and Jquery

    http://www.9lessons.info/2011/05/facebook-wa ll-script-with-php-and.html

  • download lagu | 23 Oktober 2012 - 11:20:27 WIB

    thnks kk infonya

  • mp3 download | 23 Oktober 2012 - 11:27:09 WIB

    mantap cinn
    keren abzz

  • Haris | 25 Oktober 2012 - 04:43:29 WIB

    wah terbaru nih.. di gramed bukunya udah ada mas?

  • andre.76_punk@yahoo.com | 29 Oktober 2012 - 10:12:02 WIB

    Lokomedia Sampah !!!

  • dan# | 29 Oktober 2012 - 20:42:02 WIB

    klo mau nyari template lokomedia yg bagus ada di website ane nih..

  • Lost Saga | 31 Oktober 2012 - 03:46:33 WIB

    mantap

  • Lenka Ost. Win 8 | 09 November 2012 - 14:48:24 WIB

    Info bagus ..bisa dicoba ..

  • lirik lagu | 11 November 2012 - 12:40:03 WIB

    makasih banyak atas infonya yah

  • aam | 14 November 2012 - 12:45:51 WIB

    saya suka dengan buku2 lokomedia bagus...

  • rush essay writing | 17 November 2012 - 02:11:42 WIB

    Summary. The proposed Right to Fair Compensation and Transparency in Land Acquisition, Rehabilitation and Resettlement Bill sets out to reconcile two ...

  • striping motor | 19 November 2012 - 21:58:41 WIB

    Saya suka tutorial begini nih!..

  • comparison and contrast essay | 21 November 2012 - 22:24:57 WIB

    How depressing that someone with such power over all our lives displays such a lack of basic common sense and self-control.
    Not only did he engage with the protesters, he adopted their language. Could he not have engaged his brain first? This was impulsive, stupid and childish. The protesters' tactics are hardly rocket science - provoke to get a response, and gain publicity. He gave them what they wanted - and it worked.

  • Fortuner SUV Terbaik | 23 November 2012 - 09:02:36 WIB

    Siip banget neh, bukuloko media memang tahu yang kita mau,

  • azzam | 05 Desember 2012 - 10:57:07 WIB

    ini bisa dipake dimana aja kan, ga harus pake lokomedia?

  • Tutorial Web Design Indonesia | 06 Desember 2012 - 12:01:55 WIB

    Tutorial-webdesign.com | http://twitter.com/tut_web | Membahas segala hal tentang web design & web development | UX, e-commerce, SEO, dll

  • Suntik Putih | 13 Desember 2012 - 14:09:43 WIB

    Terima kasih atas fitur barunya, Lokomedia rocks!

  • Catering Nasi Kotak Surabaya | 13 Desember 2012 - 14:37:47 WIB

    nice update

  • Lokomediers | 13 Desember 2012 - 20:03:54 WIB

    Teman2 cms lokomedia, saya mau tanya dan minta bantuannya nih. Kenapa ya saya tdk bisa inpur dan edit berita/artikel? Tampilan kesalahannya seperti dbwh ini:

    Forbidden

    You don't have permission to access /lokomedia/modul/mod_berita/aksi_berita.php on this server.

    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.


    Mohon bantuannya. Terima kasih...

  • bisnis waralaba | 19 Desember 2012 - 20:31:54 WIB

    informasi yg bermanfaat. thanks

  • bisnis waralaba | 19 Desember 2012 - 20:38:13 WIB

    informasi yg bermanfaat.thanks

  • Crisis Preparation | 21 Desember 2012 - 02:47:26 WIB

    Some camps are reported to have little by way of sanitation and are often subject to food shortages.

  • essay outline template | 22 Desember 2012 - 02:38:27 WIB

    What is happening here in Afghanistan Essentially diversities of geographically aligned peoples are reasserting their common sense of cultural identity after decades centuries of ravaging invasion, of ravaging intervention, even of ravaging goodwill and help.

  • free bingo sites | 25 Desember 2012 - 15:56:05 WIB

    The European: And we probably base our definitions on our own experiences. In almost all science fiction films, even the most bizarre aliens look rather humanoid. Wolfram When the first landers were sent to Mars, the big question was whether they would discover life forms. And from today’s perspective, some of the criteria that were discussed were rather absurd “Feed it sugar and see whether it does something.

  • free bingo bonus | 25 Desember 2012 - 22:22:38 WIB

    Such a very useful article. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article.

  • rate your professor | 26 Desember 2012 - 13:31:59 WIB

    Rightly waived most of his pay off and Mr del Missier ought to do the same,” Leslie said.

  • Blogger malaysia | 02 Januari 2013 - 15:24:50 WIB

    Senang sekali mendapatkan informasi ini, saya blogger dari malaysia mengucapkan terima kasih dan selamat tahun baru 2013. salam

  • Baju Couple Imlek | 09 Januari 2013 - 08:00:02 WIB

    makasih banyak infonya mantep banget dech

  • komunitas orang setia | 09 Januari 2013 - 08:11:40 WIB

    thnks banget loh infonya berguna sekali

  • ketulusan hati | 09 Januari 2013 - 08:25:34 WIB

    berguna sekali infonya asiik

  • restaurant review | 10 Januari 2013 - 10:12:18 WIB

    Mantap om lukman

  • Majalah Lokomedia | 31 Januari 2013 - 13:01:19 WIB

    check this out

  • hero | 20 Februari 2013 - 12:43:34 WIB

    Download Forum Facebook disini aja :http://heroaryanto.nazuka.net/semua-download.html

  • h3r0 | 20 Februari 2013 - 12:44:55 WIB

    Download Tutorial Forum Facebook disini aja :http://heroaryanto.nazuka.net/semua-download.html

  • Jual rumah | 03 April 2013 - 14:58:08 WIB

    linux bisa run bos

  • boneka online | 09 April 2013 - 14:16:00 WIB

    ini nih yang saya cari-cari. makasih om

  • Jasa SEO | 17 April 2013 - 13:34:33 WIB

    Lokomedia emang the best CMS ane udah pake, recommended buat blog full SEO friendly and simple.

  • Nike | 16 September 2013 - 15:08:44 WIB

    kayanya bagus tapi kurang ngerti gimana cara bikinnya
    tapi terima kasih atas infonya
    meskipun ga ngerti tapi jadi tau sedikit

  • Testimoni Gold G | 21 November 2013 - 10:02:16 WIB

    simak artikel ini penuh manfaatnya bagi anda http://goo.gl/upL7FI

  • Testimoni Gold G | 21 November 2013 - 10:38:12 WIB

    simak artikel ini penuh manfaatnya bagi anda http://goo.gl/upL7FI

  • Penyembuhan Penyakit Sirosis Hati Anak | 11 April 2014 - 10:30:21 WIB

    artikelnya menarik . http://goo.gl/Cbo6HS

  • peter | 26 Februari 2015 - 13:49:12 WIB

    best CMS ane udah pake, recommended buat blog full SEO .. <a href='http://www.idahofallssportsbar.com/' target='_blank'>restaurant in idaho falls</a>

  • herlambang | 15 Mei 2015 - 12:14:34 WIB

    kalo mau atur width sama height nya dmna ??