Cara Gampang Menciptakan Video Di Blog Responsive

Cara Praktis Membuat Video Youtube Di Blog Responsive

Cara Praktis Membuat Video Di Blog Responsive

Membuat video youtube responsive di blog, bagi kalian yang suka menciptakan tutorial lewat video dan menguploadanya ke youtube kemudian dipasang pada blog, sebaiknya video youtube tersebut dibikin responsive. Supaya dikala ada pengunjung yang memakai handpone dan iningin memutar video di blog kalian tidak susah atau terpotong sebab resolusi video dengan layar berbeda.

Keuntungan menciptakan vudeo youtube responsive, memudahkan pengunjung yang memakai resolusi layar yang kecil untuk melihat video tanpa terpotong, google menyarankan biar tampilan blog responsive atau mobailfriendly.

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

Tutorial Blogger Lainnya :

• Cara Mengatasi Widget Blog Tidak Bisa diHapus Atau diPindah

• Cara Cek Dan Mengatasi Broken Link Di Blog

• Membuat Menu Bar Blog Plus Icon With CSS

Langsung ke tutorialnya.

Cara Praktis 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, sempurna di atasnya.

 /* 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>

 <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, kini kita masuk ke tahap pemasangan video di blognya, supaya tampil responsive.

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

 <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 kini tainggal save dan publikasikan dan lihat hasilnya. Praktis bukan :)

Cukup sekian tutorial dari mas tamvan ihwal cara menciptakan video youtube di blog tampil respinsive, semoga bermanfaat.
Apabila ada yang mau ditanyakan, silahkan bertanya dikolom komentar ya :)