CSS Video Youtube Responsive di Blog

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.
CSS Video Youtube Responsive di Blog
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>

<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>

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:

Berlangganan update artikel terbaru via email:

0 Response to "CSS Video Youtube Responsive di Blog"

Post a Comment

Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini.

1. Berikan centang pada kotak Notify me/Beri tahu saya untuk mendapatkan notifikasi komentar.
2. Jika Anda sengaja menambahkan link saat komentar akan dihapus dan tidak akan dipublikasikan.

- taufiknh.my.id -

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel