Cara agar video youtube pada blog menjadi responsif di segala perangkat murni CSS

Pada temmplate terbaru ini:

1. SOHO
2. Notable

Sebaiknya anda tidak memasang JavaScript untuk membuat tampilan video Youtube menjadi full pada halaman postingan. Pada salah satu artikel di blognya igniel.com ada sebuah artikel yang berjudul "Membuat video Youtube pada blog menjadi responsif di semua perangkat (script baru). Ternyata setelah saya cobakan berhasil pada beberapa jenis template dengan layout lama (layout versi 2) tapi gagal dan tidak memberikan efek perubahan pada template terbaru (layout versi 3) terutama pada template blogger SOHO dan Notable. Script dari igniel adalah:  sebagai berikut:

<script> //<![CDATA[ /* Youtube Responsive by igniel.com */ 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>

Letakan saja kode tersebut dengan cara:

1. Masuk kepengaturan blog
2. Pilih tema/theme
3. Pilih edit HTML dan cari kode </body> lalu letakan kode diatas tepat diatasnya.

Jika anda menggunakan template blogger versi tua yang sudah responsive kode ini dapat dipergunakan terutama pada template sederhana (simple) awsome (PT.keren sekali) dst. Script ini akan membuat pengalaman menonton video youtube di halaman blog menjadi jauh lebih baik karena video menyesuaikan diri dengan ukuran layar atau halaman blog.

Tapi, benar benar tidak berguna pada beberapa jenis template, ini mungkin bagus untuk contempo dan emporio (saya belum coba) tapi saya pastikan tidak bekerja pada template SOHO dan Notable.

Disamping itu script JS diatas juga merugikan kecepatan pada GTmetrix jadi karena saya juga rajin mengunjungi blognya mbak Igniel dan baca sampai ke komentar komentar para pengunjungnya, nah pada salah satu komentar ada seseorang (bukan dari indonesia)  menuliskan kode CSS ya murni CSS sebagai alternatif yang menurut saya sangat manjur, script ini cukup di pasang di atas ]]></b:skin> di halaman editor HTML blog atau kalau anda tidak mengerti masuk saja ke:

1. Pengaturan blog
2. Pilih tema/Theme
3. pilih lanjutan/advance
4. Pada daftar menu yang muncul lakukan scroll hingga ke bawah
5. Pilih "Tambahkan CSS atau Add CSS) maka akan muncul kotak blanko kosong isikan kotak tersebut dengan kode css berikut dibawah ini:

/*Murni CSS tanpa JavaScript */
.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}}

Jangan lupa SAVE template.

Keuntungan menggunakan kode terakhir untuk membuat tampilan video youtube menjadi responsif di segala perangkat adalah sifatnya yang ringan dan tidak merugikan kecepatan loading, seperti yang telah kita maklumi: Kecepatan adalah inti daripada SEO blogging itu sendiri...Terutama karena javascript diatas tidak mempan dipergunakan pada kedua jenis template bawaan blogger, maka kode terakhir yang murni CSS adalah sebuah pilihan yang sangat menarik, contoh tampilan video yang saya buat sendiri:

Dibawah ini adalah tampilan portrait antarmuka template editblog soho redesain klik fullsreen saja supaya lebih jelas:

Memang ada bingkai (bezel) hitam tebal pada kedua sisi player, akan tetapi pada sebelah kanan bawah ada tombol opsi full screen yang bisa anda tekan/pencet untuk masuk ke opsi layar penuh. Bagi saya itu bukan masalah.

Itu saja saran dari saya bagi pengguna template temlate terbaru blogger. Semoga berguna.

www.editblogtema.net