
Ketika kita mengambil video dari Youtube dan memasangnya di blog (embed) ada satu kekurangan yang cukup menyebalkan, yaitu ukuran bingkai iframe video tidak mengikuti ukuran layar alias tidak responsif. Padahal sekarang ini pengunjung blog tidak hanya datang dari komputer saja, tapi dari handphone pun banyak.
Seperti inilah perbedaan tampilan video embed Youtube jika blog dibuka dari komputer dan handphone.

Ketika dibuka dari perangkat yang lebih kecil, iframe Youtube terlalu besar dan keluar dari garis pembatas postingan. Jelek banget kan? Saya punya satu script yang bisa menjadi solusi dari masalah tersebut.
Memasang Youtube Responsive iFrame Video Embed Script
Saya pernah pakai script lama yang mengharuskan mengubah kode penulisan embed. Nantinya video diambil dengan markup data-src
. Tapi ribet ya mesti ganti-ganti kode embed resmi Youtube segala.
Dengan script terbaru ini tidak perlu lagi mengubah penulisan kode embed. Jadi jauh lebih praktis. Simpan kodenya "SEBELUM / DI ATAS" </body>
.
<script> //<![CDATA[
/* Youtube Responsive by igniel.com */
window.onload = function ignielYtube() {
var youtube = $('iframe[src*="youtube.com"]');
youtube.each(function() {
$(this).attr('aspectRatio', this.height / this.width).attr('style', 'width:100%');
});
$(window).resize(function() {
youtube.each(function() {
$(this).attr('height', $(this).width() * $(this).attr('aspectRatio'));
});
}).resize();
};
//]]> </script>
Penulisan Kode Embed Video Youtube
Seperti yang sudah disebutkan di atas, penulisan kode embed untuk memasukkan video Youtube ke dalam postingan dilakukan dengan cara normal dan tidak ada yang perlu diganti. Cukup ambil kode embednya dan tulis seperti biasa.

Maka nanti hasil akhirnya akan seperti ini jika video Youtube dibuka dari smartphone atau perangkat lain yang ukuran layarnya lebih kecil.

Ini tampilan langsung videonya. Kalau kamu sedang buka blog ini dari hp, bisa dilihat sendiri ukuran iframe video mengikuti ukuran layar, bukan?
Sekarang video Youtube kamu sudah berubah menjadi full responsif karena nilai lebar dan tingginya otomatis berubah berkat script di atas. Dia akan menyesuaikan dengan ukuran layar yang sedang dipakai. Selamat mencoba dan semoga sukses!
UPDATE
Sepertinya banyak sekali yang membandingkan jQuery dengan CSS. Iya, pakai CSS doang pun bisa sebenernya. Kira-kira begini kode yang ditulis oleh salah satu pengunjung di kolom komentar artikel ini. Memang bekerja kok, kamu bisa coba sendiri.
/* Youtube 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}
}
Lebar video memang akan mengikuti ukuran layar, tapi kekurangannya akan menyisakan ruang kosong berwarna hitam. Dan hanya akan bekerja pada video berbentuk landscape. Tidak seperti jQuery yang benar-benar menghilangkan ruang hitam tersebut.
Mana script video Youtube responsive yang mau kamu pilih? Silakan tentukan sesuai kebutuhan.
Nice info. Btw mbak Igniel, tampilan mobile blog ini bagus banget.
BalasHapusMasih mas. Template blogmu juga keren banget.
Hapusbedanya dimana mas.. dengan menggunakan width='100%'
BalasHapusKalau cuma pake width 100% nilai heightnya gak ngikutin otomatis. Dia bakal responsif tapi akan menyisakan ruang hitam kosong akibat dari height yang statis.
HapusPake script ini nilai width dan height-nya berubah jadi lebih enak diliat.
cara insert videonya apakah masih pake cara lama??
BalasHapusCara insertnya normal pake kode embed bawaan yang diambil dari Youtube.
Hapusokegan saya mau coba duli
BalasHapusGan? Emang mba igniel cowo?
Hapusknapa skripnya di template iglo ga work??
BalasHapusDicoba di template Iglo versi berapa?
HapusTampilannya full screen ya di desktop...kalau pengen ukurannya 640x420px bagaimana ya???
BalasHapusTerima kasih mbak igniel, scriptnya work di blok ane
BalasHapushttp://kucingsobo.blogspot.com
Mbak Igniel, Kode ini tidak bekerja pada template Notable, gimana ya cara mengatasinya?
BalasHapusHanya template notabale saja. Pada 3 varian template terbaru (layout versi 3) lainnya sih mujarab.
Terimakasih banyak, bekerjaa :D :D
BalasHapusmbak Igniel is the best, membuat aku bolak balik mengunjungi sitenya. Hanya JQuery ini gak manjur buat salah satu dari empat template default blogger terbaru, yakni SOHO, mengapa ya...bisa bantu troubleshooting dong, mbak.
BalasHapusAlamat blognya apa mas?
Hapusdidi, this script does not work in textrim blogger theme.....how to fix this problem?.....i was put the script code just before closing body tag.
BalasHapusPut it INSIDE textrim() function.
Hapusfunction textrim() {
Hapus// Put all of your scripts here
var youtube = blablabla
.
.
.
}).resize();
}
hut this code is work for all cases.....
BalasHapus/* 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}}
Yes it's responsive but the height will have a blank space with black background. And not every height is accurate as written above (with percentage).
HapusMenarik, mbak Igniel benar tentang kiri kanan menghasilkan ruang hitam, tapi dia juga benar ketika video selesai diputar, akan menghasilkan thumbnail inline yang rapi. Pada setiap layout tema versi 3 ini bekerja.
HapusRibet banget ! ubah aja width nya menjadi 100%.
BalasHapussama seperti embed gmaps.
oh karena ruang hitam itu .... oke2
HapusDUH!!!!!
Hapuswajib dicoba
BalasHapushow to optimum image for blogspot?
BalasHapus