Youtube merupakan sebuah situs video berbagi paling populer saat ini, yang dimana anda bisa mengupload video, menonton video, atau bisa juga untuk mendapatkan penghasilan dari youtube dengan mendaftarkan Akun Google Adsense melalui youtube.
Sangat banyak kelebihan yang ditawarkan situs youtube ini, yaitu salah satunya adalah fitur embed video yang bisa anda tambahkan dan dapat ditonton langsung di blog. Tetapi dengan menambah video tersebut akan mengurangi Nilai SEO sebuah blog karena adanya elemen IFrame dan tampilannya pun belum responsive jika ukuran layar diperkecil.
Maka dari itu saya selaku penulis blog Kamsuy Blog akan memberikan trik agar video youtube menjadi responsive dan tidak akan mengurangi Nilai Seo blog anda. Berikut adalah langkah-langkah Cara Memasang Video Youtube Responsive di Blog .
Memasang Video Youtube Responsive di Blog
1. Hal pertama yang harus anda lakukan adalah Membuka Dashboard Blog kalian masing-masing > Lalu klik Menu Tema > Dilanjutkan dengan Edit HTML > Lalu tambahkan kode CSS berikut ini dan letakkan di atas </style> atau ]]></b:skin> .
/* 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 Javascript 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. Setelah kode diatas terpasang dengan benar silahkan Simpan Template .
4. Selanjutnya untuk menambah video pada postingan, gunakan kode html berikut 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 kode iframe video youtube sebagai berikut.
<iframe width="640" height="360" src="https://www.youtube.com/embed/nfs8NYg7yQM" frameborder="0" gesture="media" allowfullscreen></iframe>
Lalu Anda Salin link embed seperti kode di atas, kemudian simpan di dalam kode HTML di atas seperti ini :
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/nfs8NYg7yQM">
</div>
</div>
</div> 5. Terakhir simpan postingan dan lihat hasilnya untuk demo Responsive Youtube Video ada dibawah.
Kesimpulan
Kesimpulan jadi Cara Memasang Video Youtube Responsive di Blog sangat mudah dilakukan, cukup dengan menambahkan kode HTML,JAVASCRIPT dan CSS , yang ada diatas maka tampilan Video Youtube yang di Embed akan tampil responsive dan tanpa mengurani Nilai SEO.
Mungkin cukup sekian tutorial bagaimana Cara Memasang Video Youtube Responsive di Blog , semoga tutorial diatas dapat bermanfaat dan menjadi bahan pembelajaran khususnya bagi para blogger. Apabila tutorial diatas kurang paham silahkan tanyakan lewat berkomentar dibawah postingan ini terima kasih.