Cara Memasang Video YouTube Responsive di Semua Ukuran Layar Seluler

Trik youtube - Cara Memasang Video YouTube Responsive di Blog - Bagaimana sih agar video youtube yang kita masukkan ke halaman posting responsive yang mampu menyesuaikan resolusinya jika blg di akses melalui seluler ?.. pertanyaan ini muncul sesaat setelah saya selesai memposting artikel yang didalamnya berisi konten video.

Awalnya saya tidak memperhatikan tampilan video tersebut, namun saya sangat terkejut ketika membuka postingan via seluler yang ternyata Custom Thumbnail video Youtube tidak bisa tampil dengan sempurna alias terpotong sebelah. lihat gambar !

Baca juga : Ingin Jadi Youtuber Handal dan Sukses ? Kamu Harus Mengetahui Ini

Untuk menyematkan atau memasukkan video youtube ke dalam artikel blog kita sebenarnya sangat mudah sekali, blogger sendiri sudah menyediakan fitur "Insert image" pada editor postingan blogger. Hanya dengan klik icon gambar "Insert image" akan muncul jendela baru, atau dengan menyematkan kode iframe video yuotube. Namun sayang nya kode iframe tersebut hanya bisa tampil sempurna ketika blog di buka melalui komputer dan dekstop, Custom Thumbnail video Youtube tidak mampu beradaptasi atau menyesuaikan layar ketika blog di akses via seluler.

Untuk menyiasati kasus Custom Thumbnail video Youtube yang tidak responsive ini kita perlu trik cerdas, yaitu dengan cara menambahkan kode scrent kedalam html tempalte.

Inilah cara membuat tampilan video youtube Responsive di Blog

Buka template di dasboar blog anda.
Cari kode </style> biasanya diatas kode </head>
Kemudian paste CSS kode scrent berikut ini dibawahnya
lalu simpan template

  /* CSS Only video youtube */
.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}}

Terakhir lihat Custom Thumbnail video Youtube anda via seluler, saya yaqin tampilan Custom Thumbnail videonya tampil dengan sempurna. seperti gambar dibawah ini.

Oky trimakasih anda telah menyimak tutorial Cara Membuat Tampilan Video Youtube Responsive di Blog selamat mencoba... ketemu lagi nanti di internet salam trikpos...