Youtube adalah sebuah situs berbagi video paling populer pda saat ini dimana kita bisa mengupload video, menonton video, download video bahkan kita bisa mendapatkan penghasilan dari youtube dangan cara mendftarkan akun adsense melalui youtube.
Banyak kelebihan yang di tawarkan oleh situs youtube, di antaranya fitur embed dimana video bisa kita tambahkan dan kita tonton langsung di blog. Namun dengan menambahkan video tersebut akan mengurangi nilai SEO sebuah blog karena adanya elemen iframe dan tampilannya pun belum responsive jika ukuran layar di perkecil.
Maka dari itu saya akan memberikan trik agar video youtube menjadi responsive dan tidak mengurangi nilai SEO blog kita. Langsung saja ikuti langkah-lngkahnya :
1.Buka blogger->Tempelate->Edit Html dan tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>
Banyak kelebihan yang di tawarkan oleh situs youtube, di antaranya fitur embed dimana video bisa kita tambahkan dan kita tonton langsung di blog. Namun dengan menambahkan video tersebut akan mengurangi nilai SEO sebuah blog karena adanya elemen iframe dan tampilannya pun belum responsive jika ukuran layar di perkecil.
Maka dari itu saya akan memberikan trik agar video youtube menjadi responsive dan tidak mengurangi nilai SEO blog kita. Langsung saja ikuti langkah-lngkahnya :
1.Buka blogger->Tempelate->Edit Html dan tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>
/* Youtube Responsive */
.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}2.Tambahkan kode di bawah ini sebelum </body>
<script type='text/javascript'>
//<![CDATA[
// Youtube Responsive
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>3.Save atau simpan tempelate
4.Selanjutnya untuk menambahkan video pada postingan gunakan kode di bawah ini :
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-DI-SINI">
</div>
</div>
</div>Contoh link videonya https://www.youtube.com/embed/AFNYJNqQAvs
Salin kode di atas pada video yang akan di posting seperti gambar di bawah ini :
<div class="videoyoutube"> <div class="video-responsive"> <div class="video-youtube loader" data-src="https://www.youtube.com/embed/AFNYJNqQAvs"> </div> </div> </div>
5.Terakhir simpan dan publikasikan
Selesai sekarang video youtube yang di embed di postingan sudah responsive yang berarti bisa menyesuaikan dengan ukuran dalam layar apapun dan tidak mengurangi SEO blog kita. Sekian trik tentang cara agar video youtube menjadi responsive, semoga artikel yng sederhana ini dapat membantu dan bermanfaat. Terimakasih
