Cara Memasukkan Video ke Halaman Artikel Website

Oleh Robin Malau • Pada August 14, 2008 • Dalam kategori: Internet, Wordpress

Video sharing site seperti YouTube, Vimeo ataupun Yahoo! video memiliki fitur dimana user dapat memasukkan (meng-embed) video ke halaman website atau blog. Akhir-akhir ini saya mendapat pertanyaan dari banyak teman bagaimana caranya.

Saya akan mengambil contoh dari YouTube, untuk video lain atau jika anda menyimpan video tersebut di server sendiri, caranya tidak jauh berbeda dan konsepnya sama.

1. Pertama-tama silahkan menuju website YouTube dan pilih video yang anda inginkan ¹. Klik link nya dan anda akan diantar ke halaman video tersebut dari halaman muka YouTube.

2. Di frame sebelah kanan layar video, ada tulisan EMBED, copy code-nya yang terlihat seperti dibawah ini:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/Kj6ZhGm_cGg&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/Kj6ZhGm_cGg&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>

3. Di dashboard WordPress anda, klik WRITE NEW POST, pilih mode HTML di Post Editor anda dan Paste code tersebut. Hasilnya, video anda sudah siap tetapi masih berada di kiri wilayah artikel.

4. Agar video tersebut tepat berada di tengah (untuk WordPress) simpan code ini sebelum code dari objek video:

<p style=”text-align: center;”></p>

dan code ini setelah code objek video:

</p>

5. Standar ukuran video YouTube adalah 425px untuk lebar dan 344 px untuk tinggi. Untuk mengubah ukuran video tersebut, klik VISUAL mode di Post Editor anda. Klik di objek video nya, dan drag hingga ukurannya mencapai ukuran yang anda inginkan. Jangan lupa perhatikan lebar wilayah post anda agar video tidak keluar wilayah.

Hasil video berukuran 500 X 406 px dan berada ditengah-tengah artikel akan terlihat seperti ini:

Maaf jika anda tidak suka pilihan videonya, kebetulan saya fans Manchester United. ↩

Komentar Pembaca

habib on October 19th, 2008 at 11:07 pm

Gimana caranya mendapatkan embed kode dari video kita pribadi ?

Robin Malau on October 19th, 2008 at 11:17 pm

Pada dasarnya sih sama. Yang pasti Video nya harus ada di internet dulu baru bisa embed. Entah itu di YouTube, Vimeo, Viddler, Blip.tv dsb.

Kalau menggunakan Blogger, setahu saya, bisa langsung insert & upload dari Dashboard/Post Editor.

nanda on November 5th, 2008 at 12:26 pm

mas q nyoba kok g bs,vidio g pernah tmpil n q cb ngambil vidio pribadi gt

nanda on November 5th, 2008 at 1:33 pm

kl masukakn ke websai or ke youtoup gmn?

nanda on November 5th, 2008 at 1:38 pm

cr msknx gmn mas?
biar ke internet?

Robin Malau on November 5th, 2008 at 8:05 pm

Nanda, upload dulu kalo gitu video kamu ke YouTube. Di sebelah kanan atas ada button UPLOAD, then you’ll be done.

dicky on November 6th, 2008 at 12:41 am

infonya penting banget mksih y ……..

sukses for MU

Robin Malau on November 6th, 2008 at 12:54 am

Sama-sama Dicky…

syifa on November 15th, 2008 at 9:13 pm

gMaNa cArAx mEnGaPlOaD sEtIaP SaYa cB hRzZ bKiN dL aCcOuNtX tP gA2l tYuZz tLoNg kZzH cOnToHx!!
thx bE4

Robin Malau on November 15th, 2008 at 9:26 pm

Halo Syifa, mungkin saya bisa bantu kalau saya ngerti kamu ngomong apa. Thanks.

artha on November 23rd, 2008 at 5:43 pm

waduh………,,
informasi ini sangad membantu sekali.
Thanks ya..terus berkaryya

arthaliwa.wordpress.com

Robin Malau on November 23rd, 2008 at 8:51 pm

Cheers Artha…

Ochiana on December 2nd, 2008 at 7:34 pm

Trims mas info’a…
Eh iya, aku da coba’in tips tadi ke blog FS. Skdr taw aja, klo blog FS yg skrg ini py format & struktur yg mirip bgt ma WP.
Sewaktu msk ke mode HTML, knapa gambar koq ga maw ke tengah ya?

Robin Malau on December 2nd, 2008 at 8:22 pm

Sama-sama Ochiana.

Ya benar, tips di atas bisa di aplikasikan ke Friendster blog, soalnya mereka juga pake WordPress.

Untuk bikin video tepat di tengah, di HTML mode, insert code di awal dan akhir kode objek video seperti ada di langkah 4.

yc5nbx on December 4th, 2008 at 10:16 pm

Mas Robin, saya udah coba, awalnya jendela youtube yg tampil pd blog saya tanpa ada tulisan Search selama 4 hari. Tapi sekarang knp muncul Menu Search menindih sebagian Screen Youtube, padahal saya tidak pernah menambahkan menu tsb. Apa memang harusnya muncul seperti pada Web Anda.
Mohon solusinya?
Terima kasih.

Robin Malau on December 4th, 2008 at 10:48 pm

Sepertinya search bar jelek itu baru hari ini dan jadi default YouTube embeded video player. Saya juga sebel banget ngeliatnya…

Untuk menghilangkannya, lihat codenya, cari alamat URL YouTube nya. Untuk video di atas adalah (ingat, URL ini ada di 2 lokasi di kode embed):

http://www.youtube.com/v/Kj6ZhGm_cGg&hl=en&fs=1

Tambahkan code ini di belakangnya:

&showsearch=0

Jadi URL nya seperti ini

http://www.youtube.com/v/Kj6ZhGm_cGg&hl=en&fs=1&showsearch=0

Beres dah, tuh video di atas hilang search bar-nya…

Semoga berguna.

rully taraka on December 19th, 2008 at 1:48 pm

thanks buat tips nya…
maju terus blogger..!!

kensey on March 3rd, 2009 at 7:03 am

waduh klo semuanya sih dah jelas yaa tapi kenapa juga aku nya nggak bisa2

kensey on March 3rd, 2009 at 7:04 am

habisnya masih pertama sih jadi belum berasil

shisi on March 18th, 2009 at 9:16 am

Kok untuk blog friendster yg baru g belum berhasil juga ya.. mohon bantuannya. Spertinya embednya ndak bisa dan html buat video juga begitu save ndak kelihatan apa2.
Makasih ya…

Robin Malau on March 18th, 2009 at 9:53 am

Harusnya sih bisa, pastikan di HTML mode ya Shisi seperti gambar di bawah ini:

gambar

shisi on March 21st, 2009 at 7:16 am

thanks berat mau bantu. so far, no luck.
entah kenapa, mungkin ada penyebab2 yg umum terjadi, kalu ada infona, thanks.
g mau coba dgn account lain..

achi on April 23rd, 2009 at 12:26 pm

gmana sich cranya dpt embed dr video kita sendiri….?
sblume au dh coba…tp wktu au pasang…tu gak da hasilnya….
kesalahannya dmn ya?

handoko aji on June 19th, 2009 at 7:49 pm

iya saya mo masukkin video sepatu lukis saya nih mas nggak bisa2 euy.

Juliawan on June 20th, 2009 at 9:20 pm

hmm mantap bro ini yang gua butuhin bro thanks ya bro ^^

parwanto on July 9th, 2009 at 11:38 pm

mas tolong kirim ke email saya dunk makasih
lam kenal dari aku????
PARWANTO

iwan malau on September 6th, 2009 at 10:46 pm

waw…thank’s ya brur tutornya
mampir yake blog qu…baru belajar neh, sekalian kasih tutor2 yang lain ya ^^

benny on October 25th, 2009 at 1:09 am

Kalau lewat FB bisa nggak mas

distorsia on October 25th, 2009 at 8:44 am

Maksudnya embed video di Facebook atau embed video dari Facebook? Kalo embed video di Facebook, harus pake Custom FBML dan pake video tag nya Facebook. Kalo embed video dari Facebook, cari embed code nya, embed di blog kamu. Tekniknya sama dengan yang diatas.

harisson key on November 30th, 2009 at 2:54 pm

mas ini saya lagi nyusun TA yang judulnya IPtv…nah mw nanyak nih..apa ada cara lain untuk “menyusupkan” video selain dari yuotube? yang opensourse gt..mkasi sblmnya.

distorsia on November 30th, 2009 at 2:58 pm

Yang OpenSource gitu, nyusupin video? Bisa lebih spesifik? Kamu mau host video, yang bisa di embed, atau mau cari video hosting lain selain youtube yang pake script open source terus bisa di embed di website kamu? Atau bagaimana?

kank_ripay on December 3rd, 2009 at 2:41 pm

makasih atas infonya.. sangat membantu…

IRFAN on December 12th, 2009 at 5:25 pm

BISA MINTA TOLONG JELASIN GIMANA CARANYA MEMASUKAN VIDIO/LAGU KE BLOG.SEBELUMNYA TERIMAKASIH. KRIM KE BLOG SY BS GAK.

marfauz on December 20th, 2009 at 6:45 pm

Thx atas infonya, bagus bgt…
Setelah saya coba ternyata berhasil !!!
Hehe …
Lihat saja di blog saya telah terpampang video KCB :

http://marfauz.co.cc/?page_id=57

mampir ya ke blog saya dan jangan lupa komen-komennya!

harry on February 17th, 2010 at 1:53 am

Terima Kasih atas info ini bos saya jadi bisa memasukkan video ke bisnis saya (Bisnis 2010 NEW):)

Terima kasih

jecko on March 9th, 2010 at 11:12 am

thanks buat panduanx…
skrg aQ jd bs nampilin gambar pada blogQ……..

cobaberbagi on March 18th, 2010 at 7:58 pm

tips yang sudah lama saya cari2 terimakasih ya
salam kenal

jefry on April 27th, 2010 at 8:08 pm

mas klo naruh video sidebar gmna??
cara yang begitu udah saya coba…tapi tetep gak bisa

malah ilang codenya

distorsia on April 28th, 2010 at 1:54 am

Harusnya sama.

3DZI on May 22nd, 2010 at 2:25 am

maksih banyak mas atas infonnya soalny ku lagi bingung atas masalah ini

3DZI on May 22nd, 2010 at 2:46 am

TY MAS

Edwin on June 10th, 2010 at 11:45 am

Makasih, tip-nya oke. Berhasil juga akhirnya masukkin video ke artikel post.
Salam kenal aja

gatan on July 28th, 2010 at 12:56 pm

gimna crx mas apkh hrs mndaftr dlu klau blh daftrx di mana mohon di bls krn bru baru pegang komputer

dani sukma on August 5th, 2010 at 11:11 pm

kang..saya dah coba berkali-kali gagal terus, saya menggunakan wordpress. akhirnya sy coba dengan add video di posting, lalu pilih from url kemudian saya paste url video youtube yang dimaksud dan berhasil, tapi masalahnya ukuranya kecil??

distorsia on August 6th, 2010 at 12:59 am

Dani, untuk di WordPress.com, ya. Kalo ngga salah memang harus insert media untuk embed video.

Kamu bisa menggunakan “Insert/Edit embedded Media” di post editor, kemudian pilih “Flash”, kemudian insert URL video YouTube nya. Klik “Constrain Proportion” sebelum mengatur ukurannya, dan kemudian kamu bisa atur ukurannya di “Dimension” seperti gambar ini.

Semoga berguna, thanks.