Cara Membuat Tampilan Video Youtube Responsive di Blog

Cara Memasang Video YouTube Responsive di Blog - Bagaimana sih agar video youtube yang kita masukkan ke halaman posting responsive?.. 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 !

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 akal bulus, yaitu dengan cara menambahkan kode scrent kedalam html tempalte.

Inilah cara membuat tampilan video youtube Responsive di Blog

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

Baca juga :

• Cara Menambahkan Logo Pada Gambar Menggunakan PhotoScape
• Cara Menambahkan Logo Watermaks di Video Menggunakan Filmora
• Cara Menambahkan Logo Watermark di Video Youtube Secara Otomatis
• Buka secara lengkap di kategori editing video

1- Gunakan kode screent ini..!

/* CSS Only video youtube */
.post-body iframe{width:100%!important;}

2- jika responsive belum maksimal gunakan kode scrent lengkap berikut ini.

  /* 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 triknews...