Cara Mudah Memasang Video Youtube Responsive pada Posting Blog - Banyak sekali diantar blog/website khusus download film menampilkan trailer nya melalui youtube. Karena dengan youtube kita bisa menggunakan fitur embed video untuk menampilkan video tersebut pada blog atau website. Namun, dengan menambahkan video tersebut nilai SEO pada blog/website akan menurun. Hal ini dikarenakan tampilannya belum responsive dan juga karena adanya elemen iframe pada kode embed video tersebut.
Tampilan video yang belum responsive tentu saja akan mengganggu pengunjung karena ukuran video tidak sesuai. Apalagi para pengunjung kebanyakan menggunakan perangkat mobile. Nah maka dari itu saya akan sharing tutorial bagaimana cara memasang video youtube diblog secara responsive dan tidak mengurangi nilai SEO. Mari simak tutorialnya dibawah ini.
Cara Memasang Video Youtube Responsive
1. Login Blogger kalian, buka Template > Edit HTML dan kemudian masukan kode berikut ini diatas tag ]]></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. Selanjutnya, tambahkan kode dibawah ini sebelum tag </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. Terakhir Simpan Template
Selanjutnya untuk menambahkan video pada postingan, masukan kode berikut ini dan masukan pada halaman post mode HTML bukan Compose
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-DI-SINI">
</div>
</div>
</div>
Sekian tutorial Cara Mudah Memasang Video Youtube Responsive pada Posting Blog saya buat, bila ada yang kurang paham silakan tanyakan pada kolom komentar. Jangan lupa untuk share dan follow Blog ini untuk mendapatkan artikel terupdate lainnya, Terimakasih.
