Jika anda membuat konten situs dengan menggunakan web builder atau blog editor yang sudah dilengkapi dengan elemen, gadget atau widget khusus untuk menampilkan video YouTube maka hal meng-embed video ini tidak akan menjadi masalah besar. Lain ceritanya jika anda harus meng-embed video YouTube secara manual, yaitu dengan menuliskan kode HTML-nya. Tips and tricks kali ini membahas beberapa cara untuk meng-embed video YouTube ke dalam situs atau blog.
Untuk dapat menampilkan video YouTube ke dalam situs atau blog, anda harus mengetahui ID dari video yang bersangkutan. Bagaimana cara mendapatkan ID ini? Pertama, datang ke situs YouTube yang alamatnya di http://www.youtube.com. Selanjutnya cari atau pilih video yang anda sukai. Letakkan pointer mouse di atas gambar video tersebut, lalu klik kanan. Kemudian pilih menu Salin Lokasi Tautan. Saya contohkan di sini, saya ingin mengambil ID dari video Udin Sedunia. Lihat ilustrasi di bawah ini.
Mengambil lokasi tautan video Udin Sedunia
Buka Notepad. Paste-kan lokasi tautan yang anda salin tadi ke dalam Notepad. Dalam contoh ini, di Notepad saya tertera:
http://www.youtube.com/watch?v=rZ6rbbCOgNQ
Itu adalah link atau lokasi tautan dari video Udin Sedunia. Lantas di manakah ID-nya? Perhatikan link di atas. ID dari video tersebut adalah tulisan yang berada di sebelah kanan tanda sama dengan (=). Jadi, ID dari video Udin Sedunia adalah:
rZ6rbbCOgNQ
Catat baik-baik ID ini, karena inilah yang kita perlukan untuk dapat menampilkan video tersebut di situs atau blog kita.
Selanjutnya untuk meng-embed video tersebut ada beberapa alternatif kode HTML-nya.
Alternatif 1
Alternatif pertama adalah dengan menggunakan iframe. Cara penulisannya adalah sebagai berikut:
<iframe width="320" height="240" src="http://www.youtube.com/embed/..." frameborder="0" allowfullscreen></iframe>
Ganti ... dengan ID dari video yang ingin anda tampilkan. Dalam contoh Udin Sedunia tadi, penulisan lengkapnya seperti di bawah ini:
<iframe width="320" height="240" src="http://www.youtube.com/embed/rZ6rbbCOgNQ" frameborder="0" allowfullscreen></iframe>
Untuk nilai dari width dan height bisa anda ubah agar sesuai dengan kebutuhan anda masing-masing.
Alternatif 2
Alternatif kedua adalah dengan mempergunakan tag object. Cara menuliskannya seperti ini:
<object width="320" height="240"><param name="movie" value="http://www.youtube.com/v/...&hl=en&fs=1&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/...&hl=en&fs=1&border=1" allowscriptaccess="always" allowfullscreen="true" width="320" height="240"></embed></object>
Anda juga harus mengganti ... dengan ID dari video yang telah anda catat sebelumnya. Perhatikan, di sini ada dua ... yang harus anda isi. Demikian juga jika anda ingin mengganti nilai width dan height, masing-masing ada dua width dan dua height yang harus anda ubah.
Alternatif 3
Alternatif ketiga juga menggunakan tag object. Hanya saja hasil tampilannya agak berbeda. Sintaknya sebagai berikut:
<object width="320" height="240"><param name="movie" value="http://www.youtube.com/v/...&feature=player_embedded&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/...&feature=player_embedded&version=3" allowfullscreen="true" allowScriptAccess="always" width="320" height="240"></embed></object>
Silahkan mencoba ketiga alternatif di atas, lalu anda bisa memilih cara mana yang anda sukai.
http://www.youtube.com/watch?v=rZ6rbbCOgNQ
Itu adalah link atau lokasi tautan dari video Udin Sedunia. Lantas di manakah ID-nya? Perhatikan link di atas. ID dari video tersebut adalah tulisan yang berada di sebelah kanan tanda sama dengan (=). Jadi, ID dari video Udin Sedunia adalah:
rZ6rbbCOgNQ
Catat baik-baik ID ini, karena inilah yang kita perlukan untuk dapat menampilkan video tersebut di situs atau blog kita.
Selanjutnya untuk meng-embed video tersebut ada beberapa alternatif kode HTML-nya.
Alternatif 1
Alternatif pertama adalah dengan menggunakan iframe. Cara penulisannya adalah sebagai berikut:
<iframe width="320" height="240" src="http://www.youtube.com/embed/..." frameborder="0" allowfullscreen></iframe>
Ganti ... dengan ID dari video yang ingin anda tampilkan. Dalam contoh Udin Sedunia tadi, penulisan lengkapnya seperti di bawah ini:
<iframe width="320" height="240" src="http://www.youtube.com/embed/rZ6rbbCOgNQ" frameborder="0" allowfullscreen></iframe>
Untuk nilai dari width dan height bisa anda ubah agar sesuai dengan kebutuhan anda masing-masing.
Alternatif 2
Alternatif kedua adalah dengan mempergunakan tag object. Cara menuliskannya seperti ini:
<object width="320" height="240"><param name="movie" value="http://www.youtube.com/v/...&hl=en&fs=1&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/...&hl=en&fs=1&border=1" allowscriptaccess="always" allowfullscreen="true" width="320" height="240"></embed></object>
Anda juga harus mengganti ... dengan ID dari video yang telah anda catat sebelumnya. Perhatikan, di sini ada dua ... yang harus anda isi. Demikian juga jika anda ingin mengganti nilai width dan height, masing-masing ada dua width dan dua height yang harus anda ubah.
Alternatif 3
Alternatif ketiga juga menggunakan tag object. Hanya saja hasil tampilannya agak berbeda. Sintaknya sebagai berikut:
<object width="320" height="240"><param name="movie" value="http://www.youtube.com/v/...&feature=player_embedded&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/...&feature=player_embedded&version=3" allowfullscreen="true" allowScriptAccess="always" width="320" height="240"></embed></object>
Silahkan mencoba ketiga alternatif di atas, lalu anda bisa memilih cara mana yang anda sukai.
RSS Feed