Cara Agar Video Embed Youtube Menjadi Responsive di blog

Cara Agar Video Embed Youtube Menjadi Responsive di blog - happy weekend sobat idpolitan, pada tutorial tentang blog kali ini saya akan membagikan tentang seputar menerapkan embed youtube pada HTML artikel blog agar iframenya menjadi responsive di setiap tampilan device.

yang kita ketahui bahwasannya setiap template blog ada yang telah diselipkan kode responsive ini, namun ada juga yang tidak, dan biasanya anda perlu meletakkan beberapa kode di template tersebut, dan selanjutnya sedikit mensetting pada pulisan artikel blog.

Blogspot : tidak menyediakan fitur responsive Embed Youtube pada template.
Maka disini anda akan bisa mendapatkan embed youtube yang responsive, karena youtube sendiri hanya memberikan sebuah kode iframe namun tidak dengan kode responsivenya, untuk itu anda bisa simak cara mengatasi hal ini .
Cara Agar Video Embed Youtube Menjadi Responsive di blog

Solusi Kode Embed Youtube : Menjadi responsive

  • Buka Edit HTML Template Blog anda,
  • Cari kode ini </style>
  • selanjutnya Copy Paste Kode CSS dibawah ini, dan letakkan tepat di atas penutup </style> .
.video-youtube {
 position:relative;
 padding-bottom:56.25%;
 padding-top:30px;
 height:0;
 overflow:hidden;
}

.video-youtube iframe, .video-youtube object, .video-youtube embed {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
}
  • Sihlakan Simpan template anda , dan cobalah buat artikel baru, dan Pada HTML artikel terapkan Class seperti berikut pada kode Embed Youtube anda. :
<div class="video-youtube">
CODE EMBED YOUTUBE DISINI.....
</div>

Sampai disini sihlakan anda publishkan artikel anda, dan cobalah buka di smartphone atau tablet, maka secara otomatis video iframe youtube akan mengikuti besar layar setiap device di buka.

masalah ini pernah saya alami ketika sedang membuat sebuah konten artikel blog, dimana saya menyisipkan video embed youtube, namun ketika di buka di smartphone, iframenya terlihat besar dan tidak responsife sesuai ukuran layar smartphone yang saya gunakan.

oke sobat, itulah artikel kali ini, semoga dapat bermanfaat untuk anda yang sedang menggunakan blogspot, agar artikel anda menjadi lebih rapi lagi ketika ingin menyisipkan sebuah video youtube di dalam artikel yang ingin anda buat,

jangan lupa baca - baca artikel menarik saya yang lainnya, dan jangan pernah bosan juga untuk terus mampir, karena banyak artikel menarik lainnya yang akan saya update seputar pengetahuan - pengetahuan dunia blogger dan teknologi. thanks.

5 komentar

harus kasih kode ini ya gan

div class="video-youtube">

setiap kali mau embed

Bermanfaat sekali info nya mas (y) blog nya juga bagus =D

5 Template blog keren terbaru gratis

thanks gan :) telah mampir juga :D ,....

- Berkomentarlah dengan sopan.
- No Link Aktif, SPAM, SARA P#RN.
- Jangan membalas yang tidak sesuai tema.
- Untuk "PM/tanya hal penting" bisa lewat Social Media yang saya miliki, sekalian Kenalan dengan Admin ^_^.
EmoticonEmoticon