Cara Menampilkan Video Youtube di Blog (Cara Meng-embed Video)

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>