Cara Terbaru Pasang Video Youtube Responsive di Blogspot

Siapa yang tidak mengenal Youtube, situs berbagi video yang sangat populer ini kini sangat digandrungi oleh para warganet. Bahkan saat ini muncul profesi baru yang sering dikenal sebagai Youtuber, para youtuber ini menggantungkan hidupnya dari platform berbagi video ini.

Pada dunia blog tidak sedikit blogger yang mengambil video dari youtube untuk dipasang pada blognya. Hal ini untuk mendukung isi dari artikel blog, misal artikel tutorial atau musik pastinya ada menyisipkan video yang bersumber dari youtube.

Saat ini kebanyakan pengakses blog berasal dari perangkat mobile, dan pada umumnya template bawaan blog dalam hal ini blogspot tidak menyertakan untuk tampilan responsive mobile. Hal ini mengurangi daya tarik pengunjung blog apabila tampilan video youtubenya tidak sesuai dengan template blog.

Bagaimana agar tampilan video youtube dapat menyesuaikan perangkat (responsive) saat tampil di blog, berikut tutorial cara terbaru pasang video youtube responsive di blogspot.

Langkah pertama buka Blogger > Template > Edit HTML kemudian tambahkan kode dibawah sebelum </style>

/* Youtube Responsive */
.videoyoutube{text-align:center;margin:auto;width:100%;}
.youtube-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.youtube-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

Selanjutnya tambahkan lagi kode dibawah 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>

Lalu simpan template blogspot anda.

Sampai tahap ini penambahan script pada template selesai, selanjutnya agar video yang dimasukkan pada postingan blog responsive maka anda harus menambahkan secara manual kode berikut pada saat anda mengetik artikel.

Tambahkan kode dibawah ini pada tab HTML saat anda akan mengetik artikel.

<div class="videoyoutube">
<div class="youtube-responsive">
<div class="video-youtube loader" data-src="Link Embed Video Disini">
</div>
</div>
</div>

Berikut contoh link embed video yang diambil :

Salin link embed, kemudian didalam kode HTML pada postingan anda seperti contoh berikut

<div class="videoyoutube">
<div class="youtube-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/NHVCWLJnGbg">
</div>
</div>
</div>

Kemudian simpan dan publish postingan anda. Pemasangan video youtube responsive pun selesai. Semoga artikel ini dapat membantu dan bermanfaat bagi anda. Salam.

Baca juga