CSS Video Youtube Responsive di Blog

Daftar Isi

CSS Video Youtube Responsive di Blog. Cara memasang youtube di blog sudah banyak toturialnya. Youtube sendiri menyediakan kode HTML untuk di tanamkan pada blog.  Akan tetapi hasil yang akan muncul pada blog sering kali tidak responsive tergantung dari template blog masing-masing.

Jika template kalian mengalami kendala dalam menampilkan video youtube yaitu dalam hal ukuran yang tidak responsive. Kali ini saya akan berbagi CSS bagaimana agar ukuran youtube responsive menyesuaikan dengan lebar template. Sehingga dengan memasang CSS ini video youtube di blog kalian akan lebih enak untuk ditonton.

Berikut ini adalah CSS Video Youtube agar Responsive di Blog:

Langka Pertama	Sebelum memasukkan kode HTML video youtube ke dalam postingan terlebih dulu haru memasukkan kode CSS ke  dalam template. Silahkan Copy CSS dan letakkan diatas / sebelum</head>
Langkah Kedua	Memasukkan kode HTML video youtube kedalam postingan caranya kalian buka terlebih dulu buka video youtube yang ingin ditampilkan di blog lalu klik kanan tepat di dalam video tersebut dan klik "sematkan/embed" bisa juga dengan klik tombol bagikan lalu klik "sematkan / embed" lalu simpan pada postingan di HTML.

Berikut ini kode CSS letakkan diatas / sebelum</head>

/* 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}}

Jika ada pertanyaan silahkan tulis di kolom komentar. CSS ini sudah saya coba berikut ini tampilan video youtube ukuran width akan menyesuaikan ketika dalam mode desktop maupun mobile: