Tuesday, February 23, 2016

Cara Membuat Youtube Responsive di Blog Dengan CSS (Update)

Dahulu website/ blog hanya dapat diakses menggunakan komputer dan laptop dengan ukuran layar besar. Namun seiring majunya perkembangan teknologi, semua device bisa membuka halaman website/ blog. Mulai dari smartphone Android, Tablet, dan lain sebagainya. Untuk itu tampilan blog harus responsive supaya blog tidak kelihatan morat marit.

Responsive artinya menyesuaikan ukuran layar, jadi halaman blog beserta isinya seperti gambar dan video harus sesuai dengan ukuran layar. Terkadang kita menjumpai gambar kelihatan separo di blog orang, artinya blog tersebut tidak responsive. Menindak lanjuti postingan sebelumnya yaitu Cara Membuat Tampilan Video Youtube Responsive di Blogger (Work), kini ada cara yang lebih mudah yaitu cukup menggunakan CSS saja.

Cara ini lebih mudah diterapkan karena tidak perlu menambahkan kode embed box setiap kali menambahkan video Youtube di halaman blog. Baiklah berikut ini Cara Membuat Tampilan Youtube di Blog Responsive Hanya Menggunakan CSS.

1. Perhatikan kode CSS berikut ini. Copy kode tersebut dan letakkan di atas kode ]]></b:skin>
/* 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}}
2. Simpan dan lihat hasilnya.


EmoticonEmoticon