Cara Membuat Video Responsive di Blogger dengan Menggunakan CSS

Blogger adalah layanan geratis yang sengaja diciptakan oleh Google untuk membantu para blogger diseluruh dunia menyalurkan hobinya, blogger sudah berdiri sejak lama dan juga sudah dipercaya kualitasnya oleh para blogger lainnya. Banyak sekali fitur-fitur bagus yang dimiliki oleh blogger, dan tentu saja semua itu bisa kamu akses dan gunakan secara geratis.

Tidak hanya menuliskan artikel yang ditambahkan dengan foto saja, di blogger kamu juga bisa memasukkan (Upload) video kedalam postingan artikel blogmu. Untuk cara memasukkan videi kedalam blogger juga sangat mudah, caranya hampir sedikit mirip dengan cara memasukkan foto di blogger.

Cara Membuat Video Responsive di Blogger dengan Menggunakan CSS

Mengupload atau memasukkan video kedalam isi postingan blog memang mudah, tapi hasilnya bisa saja terlihat kurang bagus dan tidak sama ukurannya dengan artikel maupun template blog. Meskipun kamu sudah menyesuaikan panjang dan lebar videonya, percayalah bahwa tampilannya tidak akan terlihat bagus apabila dilihat dengan menggunakan Android. Tapi kamu tidak usah khawatir soal hal itu, karena saya mempunyai sedikit solusinya untuk kamu.

Cara Membuat Tampilan Video Blogger Menjadi Responsive

Untuk membuat tampilan video di blogger menjadi responsive apabila diakses disemua perangkat, kamu bisa menambahkan sedikit Kode CSS yang saya berikan berikut ini:
<style type='text/css'> /* 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}} </style>
Silahkan tambahkan kode css diatas kedalam template blog kamu, jangan lupa juga untuk meletakkan kode css tersebut sebelum </head>

Jika sudah ditambahkan, sekarang kamu bisa langsung menyimpannya agar kode tersebut tidak hilang dan bisa terpasang kedalam template blogmu. Untuk melihat hasilnya, kamu bisa menambahkan video berdurasi pendek kedalam artikelmu.

Owh iya sobat, kode diatas juga berlaku untuk semua video yang kamu masukkan atau embed di blogger, baik itu video YouTube, Google Drive, dan lain-lain.

Jadi itu tadi adalah cara membuat tampilan video responsive di blogger, saya harap kalian semua suka dengan tutorial ini. Tetap kunjungi terus blog sederhana saya ini, dan jangan lupa juga untuk share artikel ini kesemua sahabatmu. Selamat mencoba!
Nada Tazkia Hello Kitty Berhijup ^_^

0 Response to "Cara Membuat Video Responsive di Blogger dengan Menggunakan CSS"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel