Cara memasang video youtube di widget blogspot - Sonny Ogawa

Halaman

    Social Items



Cara memasang video Youtube di Widget blog - Cara pasang video youtube atau dimasukkan ke blog dan bisa langsung diputar oleh pembaca atau pengunjung blog.

Berikut cara memasang video youtube di blog:
1. Buka video youtube yang ingin anda pasang di postingan ataupun di widget blog.

2. Berikutnya, klik pada layar video tersebut, Kemudian klik "Salin kode semat" atau "Copy Embed Code". Lihat gambar di bawah ini:
Cara memasang video youtube di widget blog

3. Jika anda menggunakan browser opmin mobile, lihat kodenya di alamat address bar opmin anda, Seperti contoh dibawah ini:
https://www.youtube.com/embed/o3X4TELuCzo

4. Ambil kode yang berwarna biru. Selanjutnya Pastekan kode semat / embeded code yang sudah anda copy, Lalu tambahkan script berikut ini!
rel=0&autoplay=1

5. Berikutnya kita akan menggabungkan scriptnya secara lengkap, seperti contoh di bawah ini:
<iframe width="640"height="360" src="http://www.youtube.com/embed/o3X4TELuCzo?feature=player_detailpage?rel=0&autoplay=1"frameborder="0"allowfullscreen></iframe>
ket: 640 adalah lebar dan 360 adalah tinggi video. Ganti sesuai keinginan anda.

Lalu Bagaimana cara memasangnya di blog?

Jika anda ingin memasang sebagai widget di sidebar Buka Layout/Tata Letak , lalu pilih Gadget HTML / JAVASCRIPT, kemudian pastekan scriptnya, dan klik Simpan.

Jika anda ingin memasang di halaman postingan sebagai article, buka halaman entry baru, lalu klik HTML (bukan compose). Kemudian pastekan script embed di bagian yang anda kehendaki. Misalnya di bagian atas postingan, tengah, atau bawah. Selanjutnya klik publish.

Update

Agar videonya menjadi responsive, tambahkan CSS dibawah ini sebelum atau diatas kode ]]></b:skin> pada template anda.

/* CSS Only */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}
Atur kembali CSS max-height dalam media query jika kurang sesuai.

Kini video youtube yang diembed di postingan sudah responsive yang berarti video bisa menyesuaikan dengan ukuran dalam layar apapun.

Semoga artikel cara pasang video youtube di blog ini bermanfaat bagi rekan blogger semua. Terima kasih.

Cara memasang video youtube di widget blogspot



Cara memasang video Youtube di Widget blog - Cara pasang video youtube atau dimasukkan ke blog dan bisa langsung diputar oleh pembaca atau pengunjung blog.

Berikut cara memasang video youtube di blog:
1. Buka video youtube yang ingin anda pasang di postingan ataupun di widget blog.

2. Berikutnya, klik pada layar video tersebut, Kemudian klik "Salin kode semat" atau "Copy Embed Code". Lihat gambar di bawah ini:
Cara memasang video youtube di widget blog

3. Jika anda menggunakan browser opmin mobile, lihat kodenya di alamat address bar opmin anda, Seperti contoh dibawah ini:
https://www.youtube.com/embed/o3X4TELuCzo

4. Ambil kode yang berwarna biru. Selanjutnya Pastekan kode semat / embeded code yang sudah anda copy, Lalu tambahkan script berikut ini!
rel=0&autoplay=1

5. Berikutnya kita akan menggabungkan scriptnya secara lengkap, seperti contoh di bawah ini:
<iframe width="640"height="360" src="http://www.youtube.com/embed/o3X4TELuCzo?feature=player_detailpage?rel=0&autoplay=1"frameborder="0"allowfullscreen></iframe>
ket: 640 adalah lebar dan 360 adalah tinggi video. Ganti sesuai keinginan anda.

Lalu Bagaimana cara memasangnya di blog?

Jika anda ingin memasang sebagai widget di sidebar Buka Layout/Tata Letak , lalu pilih Gadget HTML / JAVASCRIPT, kemudian pastekan scriptnya, dan klik Simpan.

Jika anda ingin memasang di halaman postingan sebagai article, buka halaman entry baru, lalu klik HTML (bukan compose). Kemudian pastekan script embed di bagian yang anda kehendaki. Misalnya di bagian atas postingan, tengah, atau bawah. Selanjutnya klik publish.

Update

Agar videonya menjadi responsive, tambahkan CSS dibawah ini sebelum atau diatas kode ]]></b:skin> pada template anda.

/* CSS Only */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}
Atur kembali CSS max-height dalam media query jika kurang sesuai.

Kini video youtube yang diembed di postingan sudah responsive yang berarti video bisa menyesuaikan dengan ukuran dalam layar apapun.

Semoga artikel cara pasang video youtube di blog ini bermanfaat bagi rekan blogger semua. Terima kasih.