Cara Memasang Video Youtube Responsive di Blogger Blogspot Agar SEO Friendly. Ada sedikit duduk kasus yang berkaitan dengan tampilan konten pada template-template responsive blogger, yaitu berkaitan dengan konten video yang berasal dari youtube. Jika sahabat berusaha untuk embed (menyematkan/memasang) video dari youtube memakai isyarat semat bawaan/default ke blogger maka tampilan video nya tidak akan responsive alias tidak mengikuti template (berantakan), dan ini akan menggangu fungsi dan khasiat template responsive yang telah kita gunakan, selain juga isyarat semat bawaan youtube itu tidak SEO friendly. Solusinya? Cara menciptakan video youtube responsive dan SEO friendly akan kita bahas di post kali ini.
Catatan: Ciri video responsive yakni mengikuti lebar halaman post blog kita, jadi menyerupai apapun lebarnya, maka video akan menyesuaikan.
Pertama yaitu solusi semoga isyarat semat youtube jadi SEO friendly,
Agar Code Embed Video Youtube Makara SEO
Alasan mengapa isyarat embed bawaan youtube itu tidak seo sebab isyarat yang dipakai yakni isyarat tag html iframe, sedangkan di beberapa web yang membahas wacana SEO menyatakan bahwa isyarat iframe itu jelek untuk blog atau web dalam hal SEO. Makara solusinya kita ubah saja tag iframe nya menjadi tag object. Ikuti langkah-langkahnya berikut ini:
1. Kode bawaan youtube untuk di-embed ke web yakni menyerupai berikut ini:
<iframe width="640" height="360" src="https://www.youtube.com/embed/7pj_2f0Aq1w" frameborder="0" allowfullscreen></iframe>
Kode di atas memakai tag iframe, selanjutnya yakni isyarat SEO friendly dengan tag object
2. Kode dengan tag object (SEO friendly)
<object data="//www.youtube.com/embed/7pj_2f0Aq1w" frameborder="0" allowfullscreen></object>
3. Gunakan isyarat pada nomor dua untuk mendapat konten video yang SEO friendly. Jika sahabat galau dengan kode-kode di atas, cukup dengan memperhatikan pada isyarat unik id video yang telah aku tandai dengan warna biru. Makara cara cepat mengubah isyarat semat/embed dari iframe ke object yaitu dengan meng-copy isyarat id unik video itu ke code yang telah aku sertakan di langkah nomor dua.
Selanjutnya menciptakan semoga tampilan videonya responsive
Membuat Tampilan Video Youtube Responsive di Blogspot
Untuk menciptakan tampilan video youtube yang responsive di blogger blogspot kita hanya butuh isyarat embed youtube dengan tag object menyerupai yang telah kita bahas di kepingan sebelumnya dan juga isyarat CSS sederhana. Silahkan untuk mengikuti langkah-langkah berikut ini:
1. Login ke Blogger
2. Pilih sajian template -> kemudian klik Edit HTML -> kemudian letak isyarat berikut di atas isyarat tag html ]]></b:skin> (gunakan ctrl+f semoga lebih gampang 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 isyarat 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. Makara bila kita masukkan ke post atau widget HTML kita jadinya menyerupai berikut ini:
<div class="embed-box">
<object data="//www.youtube.com/embed/7pj_2f0Aq1w" frameborder="0" allowfullscreen></object>
</div>
dan jadinya yakni menyerupai berikut ini:
Bagaimana sob? Video-nya responsive kan sekarang?
Sekian saja dulu tutorial kali ini, semoga bermanfaat. Terima kasih telah berkunjung. Tags: Cara menciptakan video youtube responsive, Agar video Youtube SEO friendly, Agar video youtube mengikuti lebar postingan