Cara Mudah Membuat Video Di Blog Responsive

Cara Mudah Membuat Video Youtube Di Blog Responsive

Membuat video youtube responsive di blog, bagi kalian yang suka membuat tutorial lewat video dan menguploadanya ke youtube lalu dipasang pada blog, sebaiknya video youtube tersebut dibikin responsive. Supaya ketika ada pengunjung yang menggunakan handpone dan iningin memutar video di blog kalian tidak susah atau terpotong karena resolusi video dengan layar berbeda.

Keuntungan membuat vudeo youtube responsive, memudahkan pengunjung yang menggunakan resolusi layar yang kecil untuk melihat video tanpa terpotong, google menyarankan agar tampilan blog responsive atau mobailfriendly.

Nah untuk tutorial cara membuat video youtube responsive di blog, silahkan ikuti tutorialnya di bawah, tapi jangan lupa untuk membaca tutorial lainnya di blog mas tamvan ini.

Langsung ke tutorialnya.

Cara Mudah Membuat Video Di Blog Responsive

• Login ke Blogger.com

• Masuk ke tab Template Edit HTML

• Cari Kode ]]></b:skin> atau </style>

• Masukan CSS di bawah ini, tepat di atasnya.

123456789101112
/* CSS Video Responsive */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}
 

• Tambahkan Jquery di bawah ini sebelum atau diatas </body>

12345678
<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>
 

• Save template

• Pemasangan CSSnya sudah selesai, sekarang kita masuk ke tahap pemasangan video di blognya, supaya tampil responsive.

• Untuk menambahkan video responsive ke postingan, gunakan Code dibawah ini.

12345678
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="LINK EMBED VIDEO">
</div>
</div>
</div>

• Silahkan ganti kata LINK EMBED VIDEO dengan link video yang mau dipasang pada blog.

• Contoh pengambilan URL EMBED Video Youtube.

• Nah sekarang tainggal save dan publikasikan dan lihat hasilnya. Mudah bukan :)

Cukup sekian tutorial dari mas tamvan tentang cara membuat video youtube di blog tampil respinsive, semoga bermanfaat.

Apabila ada yang mau ditanyakan, silahkan bertanya dikolom komentar ya :)

Share this post