Bagaimana Trik Cara Agar Video Yang Di Sematkan Pada Postingan Blog Menjadi Full Responsive?


Trik Cara Agar Video Yang Di Sematkan Pada Postingan Blog Menjadi Full Responsive. Biasanya di beberapa postingan atau artikel website, kita di haruskan untuk memasukan atau menyematkan video youtube sebagai pelengkap atau menambah informasi terkait berita yang di sampaikan.

Youtube merupakan media atau situs berbagi video yang paling populer saat ini. Kita bisa meng-upload berbagai macam video yang tentunya tidak melanggar aturan-aturan yang di berikan oleh pihak youtube.

Selain dari situs untuk berbagi video biasanya youtube juga akan di manfaatkan sebagai ladang pengasilan bagi mereka yang memiliki channel youtube populer. Yaitu dengan memonetisasi channel youtube dengan akun google adsense.

Banyak kelebihan yang di tawarkan situs website ini, salah satunya yaitu embed video, atau kita dapat menyematkan video ke dalam postingan website, sehingga dapat langsung ditonton di blog atau website. 

Namun biasanya dengan di tambahkan video ke dalam postingan, akan mengurangi nilai SEO pada sebuah blog atau website itu sendiri. Karena ada elemen iframe dan tamilannyapun elum responsive ketika halaman blog atau website di perkecil. 

Pada kesempatan kali ini saya akan berbagi informasi mengenai tips cara membuat video youtube full responsive di blog


alt="Cara Membuat Video Youtube Responsive di Blog"

Berikut adalah cara membuat video youtube responsive, dengan melakukan teknik ini tidak akan mengurangi nilai SEO pada blog anda. 

1. Buka blogger > template > edit HTML, kemudian cari kode ini ]]></b:skin> atau </style> dan tambahkan script di bawah ini sebelum kode ]]></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 silahkan anda tambahkan kode 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. Simpan template, pada bagian ini kita sudah selesai, beralih ke bagian postingan.

4. Selanjutnya untuk menambahkan video pada postingan, gunakan kode di bawah ini

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

5. Silahkan ambil link embed video yang akan di pasang di postingan blog, untuk memasangnya masuk dulu ke HTML postingan, kemudian masukan script posingan youtube tadi dan ganti "SIMPAN-LINK-EMBED-VIDEO-DI-SINI" dengan link embed video anda.

Contoh link embed video yang di ambil dari yotube

alt="cara membuat video youtube responsive di blog"

Salin link embed seperti screnshoot youtube di atas, kemudian simpan di dalam kode HTML di atas seperti ini:

lt;div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/31k_DB8KVQM">
</div>
</div>
</div> 

Update CSS saja

Ini merupakan update CSS yang terbaru dari blog Arlina Design. Ini adalah teknik cara mengakali vode youtube agar dapat responsive hanya dengan CSS. Bagi anda yang ingin mengganti hanya dengan CSS nya saja, silahkan untuk memasang kode di bawah ini.

/* CSS Only */
.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}}

Atur kembali CSS max-height dalam media query jika di rasa kurang pas atau kurang sesuai.

Selesai, kini video yang di pasang atau di sematkan di blog anda bisa menyesuaikan atau responsive ketika tampilan blog/website di perkecil. 

Mungkin itu saja trik atau tips cara membuat video youtube responsive di blog Semoga bisa bermanfaat untuk anda semua, silahkan untuk di SHARE. Terima kasih.

Comments