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:

5 Comments

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 -

  1. I must test with you here. Which is not one thing I normally do! I enjoy studying a submit that will make people think. Also, thanks for allowing me to comment! website designer nyc

    ReplyDelete
  2. I am still learning of your stuff, and i am attempting to achieve my objectives. I completely adore reading through all that is written in your website. Maintain the actual ideas arriving for long term ! Thanks ! new york web design company

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. This site can be a walk-through its the information you wanted concerning this and didn’t know who to ask. Glimpse here, and you’ll undoubtedly discover it. branding san francisco

    ReplyDelete
  5. Man, I really enjoyed reading this message. You have convinced me to subscribe to your blog, but where can I find the RSS feed? interface design agency san francisco

    ReplyDelete
Previous Post Next Post

نموذج الاتصال