Cara Membuat Video Youtube Responsive Pada Blog - Banyak para Blogger yang menggunakan fitur sematkan atau embed pada Youtube, fitur ini digunakan para Blogger untuk menyematkan video Youtube langsung ke Blog mereka. Jadi bisa langsung ditonton langsung. Contoh seperti video dibawah ini.
(CONTOH VIDEO BELUM RESPONSIVE)
kalian udah tau belum apasih maksudnya Responsive itu?
Dalam bahasa Indonesia responsive adalah responsif > menurut KBBI (kamus besar bahasa indonesia) responsif adalah /res·pon·sif/ /résponsif/ a cepat (suka) merespons; bersifat menanggapi; tergugah hati; bersifat memberi tanggapan (tidak masa bodoh) tapi yang aku maksud bukan itu ya.
Kata responsif yang aku maksud disini adalah supaya video Youtube yang ada di Blog kita menjadi lebih ringan loadingnya, dan karena adanya elemen iframe pada kode dari Youtube akan mengurangi nilai SEO pada blog kita, dan tampilannya juga belum responsif (bisa terlalu besar atau terlalu kecil) meskipun bisa diatur, Contoh kode video dari Youtube :
<iframe width="560" height="315" src="https://www.youtube.com/embed/61vxWNDjjgA" frameborder="0" allowfullscreen></iframe>Nah sekarang kita akan membuat video Youtube yang ada pada Blog kita menjadi responsif dengan hanya menggunakan CSS dan Jquery!
HANYA MENGGUNAKAN CSS
Langsung buka Blogger > Template > Edit HTML > Cari kode ]]></b:skin> dengan CTRL + F > Lalu tambahkan kode dibawah ini sebelum kode tersebut.
/* 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}}
NB : Jika videomu tidak muncul hanya dengan menggunakan CSS berarti gunakan cara dengan CSS dan Jquery.
MENGGUNAKAN CSS & JQUERY
1. Buka Blogger > Template > Edit HTML > Tambahkan kode di bawah ini sebelum ]]></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. 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.
4. Berikutnya jika kalian menambahkan video pada artikel kalian gunakan kode dibawah ini :
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="LINK SEMATKAN / EMBED">
</div>
</div>
</div>Ganti tulisan LINK SEMATKAN / EMBED dengan kode sematkan (embed) pada video Youtube yang diinginkan, contoh link yang diambil :
Dan hasil akhir kodenya akan seperti ini :
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="https://www.youtube.com/embed/61vxWNDjjgA">
</div>
</div>
</div>5. Letakkan kode pada Postingan dengan mode HTML.
 |
| Mode HTML |
Terakhir Publikasikan / simpan artikel kamu, sekarang video youtube di blog kamu sudah responsive!
(CONTOH VIDEO SUDAH RESPONSIVE)
- Tampilan video Youtube menyesuaikan dengan blog kita (gaperlu disetting lagi)
- Video youtube menjadi lebih ringan pada blog
- Gak usah kawatir lagi tentang masalah SEO pada kode iframe youtube yang lama