Bila ingin menambahkan video youtube di dalam artikel atau postingan agar tidak mempengaruhi nilai SEO pada blog yaitu video tersebut harus responsive, dan agar video menjadi responsive pada saat menambahkannya pada artikel ada caranya, yaitu dengan menambahkan kode di HTML Tema dan HTML Entri pada saat menambahkan video di dalam artikel. Pernah saya alami yang sebelumnya saya menambahkan video tutorial pada artikel dengan cara langsung alhasil video tersebut tidak responsive dan nilai SEO dan visitor blog saya menjadi menurun. Dan agar video youtube responsive di blog, cara dan langkahnya silahkan simak sebagai berikut.
Cara Agar Video Youtube Responsive Di Blog
Masuk ke dasbor Blogger kemudian menu Tema dan Edit HTML, selanjutnya copy dan pastekan kode di bawah ini sebelum kode ]]></b:skin> atau </style>
/* Youtube Responsive THOPADS */
.videoyoutube{
text-align:center;
margin:auto;
width:100%;
}
.video-responsive{
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
.video-responsive iframe{
position:absolute;
top:0;left:0;
width:100%;
height:100%;
border:0
}
.videoyoutube{
text-align:center;
margin:auto;
width:100%;
}
.video-responsive{
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
.video-responsive iframe{
position:absolute;
top:0;left:0;
width:100%;
height:100%;
border:0
}
Berikutnya tambahkan kode di bawah ini juga sebelum kode </body>
<script type='text/javascript'>
//<![CDATA[
// Youtube Responsive THOPADS
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>
//<![CDATA[
// Youtube Responsive THOPADS
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>
Simpan Tema
Dan untuk menambahkan video youtube di dalam artikel atau postingan di blog yaitu dengan menggunakan kode di bawah ini
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="COPY PASTE LINK EMBED VIDEO YOUTUBE">
</div>
</div>
</div>
<div class="video-responsive">
<div class="video-youtube loader" data-src="COPY PASTE LINK EMBED VIDEO YOUTUBE">
</div>
</div>
</div>
Dengan cara copy LINK EMBED video youtube yang akan di tambahkan di dalam artikel atau postingan blog dan pastekan di dalam kode di atas.
Catatan:
Untuk LINK EMBED video yang di copy, tidak semua yang di copy tapi yang penting intinya saja sebagia contoh seperti gambar di atas sama persis
Untuk LINK EMBED video yang di copy, tidak semua yang di copy tapi yang penting intinya saja sebagia contoh seperti gambar di atas sama persis
Bila sudah di terapkan langkah di atas tinggal Publikasikan atau Perbarui artikel atau postingan dan lihat hasilnya
Cukup sekian Cara Agar Video Youtube Responsive Di Blog semoga bermanfaat bagi para pembaca blog ini dan terimakasih,..
