Namun. iseng-iseng saat membuka blog kumau.info yang menggunakan platform blogspot lewat smartphone, saya menemukan tampilan video yang belum responsive. Untuk yang lain sudah.
Terus terang meskipun menggunakan template lama yang belum responsive, namun sudah saya modifikasi agar menjadi responsive. Ternyata untuk video (iframe) belum :(
Hal yang sama juga terjadi pada blog Kang andre. Untuk video belum responsive sehingga tampilan di seluler hanya terlihat separo. Jadi nggak sempurna dan nggak enak dilihat.
Kalau blog ini telah responsive untuk embed video youtube.
Mengingat banyak artikel yang berisi video itu merupakan artikel-artikel lama dan kesulitan untuk mengedit kembali, maka salah satu cara yang tepat adalah menambah kode CSS saja.
Ada dua cara sebenarnya. Cara lama adalah menambah CSS untuk class <div>. Namun hal itu akan mengubah kembali untuk semua artikel yang berisi video menambah tag <div> untuk memanggil CSS yang berisi class responsive untuk video youtube.
Namun yang paling praktis saat ini adalah hanya menambah CSS untuk iframe.
Mengubah Video Youtube Jadi Responsive di Blogspot
Bagaimana cara membuat video Youtube agar responsive di blogspot?
Cukup tambahkan kode CSS di antara <head>...</head> di bawah ini.
<style type="text/css">
/* CSS VIDEO */
.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}}
</style>
/* CSS VIDEO */
.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}}
</style>
kemudian simpan
Catatan: Atur ukuran max-height (%) jika kurang sesuai.
Sebagai contoh video berikut:
Video youtube akan terlihat lebar jika dibuka dari desktop atau laptop, karena menggunakan
class: .post-body iframe {width:100%!important;}.
Namun akan tampil bagus di smartphone karena menyesuaikan lebar layar. Jika dikurangi % -nya, akan terlihat semakin kecil di smartphone.
Cukup simple, bukan?
Cara Membuat Video Youtube Responsive di Blogspot
0 komentar:
Posting Komentar
Semua komentar dimoderasi. Maaf jika komentar tidak ditampilkan atau dibalas.