Cara Menampilkan Video Youtube Responsive Di Sidebar Blooger
Membuat Tampilan Video Youtube Responsive di Sidebar Blogspot
Untuk membuat tampilan video youtube yang responsive di sidebar blogger/blogspot kita membutuhkan kode embed youtube dengan tag object.
Perhatikan Langkah - Langkahnya :
1. Login ke Blogger Anda
2. Pilih menu template -> kemudian klik Edit HTML -> lalu letak kode berikut di sebelum kode tag html ]]></b:skin> (gunakan ctrl+f agar lebih mudah menemukannya)
.embed-box {
position: relative;
padding-bottom: 62.25%; /* ratio for youtube embed */
padding-top: 30px;
height: auto;
overflow: hidden;
}
.embed-box iframe,
.embed-box object,
.embed-box embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
3. Klik Save Template
4. Selanjutnya gunakan kode HTML berikut ini setiap kali ingin embed video youtube di blog. Bisa di post atau di widget HTML/JavaScript
<div class="embed-box"> KODE EMBED VIDEO YOUTUBE DENGAN TAG OBJECT DISINI </div>
5. Jadi kalau kita masukkan ke widget HTML kita jadinya seperti berikut ini:
<div class="embed-box"> <object data="//www.youtube.com/embed/7pj_2f0Aq1w" frameborder="0" allowfullscreen></object> </div>
6. Publikasihkan dan lihat hasilnya. Tarraaaa anda berhasil membuat video youtube menjadi responsive di sidebar/widget
Note : Alasan mengapa kode embed bawaan youtube itu tidak seo karena kode yang digunakan adalah kode tag html iframe, sedangkan di beberapa web yang membahas tentang SEO menyatakan bahwa kode iframe itu buruk untuk blog atau web dalam hal SEO.
Baca Juga : Cara Menampilkan Timeline Twitter Di Blog
Selamat Mencoba dan Jangan Sungkan untuk bertanya, saya siap untuk membantu