 |
| Source: elementor.com |
hobingoding.com - Dalam sebuah postingan blog ada kalanya kita akan memerlukan media pendukung seperti gambar maupun video yang perlu kita masukkan untuk membuat postingan yang kita miliki lebih menarik bagi pengunjung.
Adapun cara-cara menambahkan media pendukung yang telah saya sebutkan di atas sudah saya bahas pada postingan berikut ini:
Baca juga: Cara Menambahkan Gambar dan Video pada Postingan Blog
Setelah kita menambahkan gambar dan video ke dalam postingan blog yang kita miliki khususnya setelah kita menambahkan video ke dalam postingan blog, nantinya ukuran dari video yang telah kita tambahkan tersebut akan berukuran fixed atau dengan kata lain ukuran dari video tersebut sudah tetap dan tidak akan mengikuti lebar daripada halaman postingan kita masing-masing (tidak responsive).
Dengan begitu saya disini akan membahas bagaimana cara membuat ukuran video menjadi responsive pada postingan blog agar nantinya postingan blog yang kita miliki lebih enak untuk dipandang. Berikut langkah-langkahnya:
1. Masuk ke blogger, kemudian pilih Tema, lalu pilih Edit HTML.
2. Salin kode berikut lalu tempelkan di atas kode ]]></b:skin> (gunakan CTRL + F untuk mempermudah pencarian).
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}3. Klik Simpan.
4. Selanjutnya buat sebuah postingan baru lalu tambahkan paling tidak satu buah video.
5. Ubah mode draft blogger menjadi mode HTML, lalu cari kode pembungkus video yang telah ditambahkan biasanya dimulai dengan <iframe...> dan diakhiri </iframe>.
6. Tambahkan kode <div class="video-container"> sebelum kode <iframe...> yang ada di atas, lalu tambahkan juga penutup </div> setelah kode </iframe>.
 |
| Penambahan "div class" sebelum dan sesudah kode video. |
7. Klik Publikasikan untuk melihat video yang telah ditambahkan.
Dengan cara di atas nantinya video yang telah kita tambahkan akan ditampilkan sesuai dengan lebar halaman postingan blog yang kita miliki. Kita disini memanfaatkan sebuah class video-container untuk membungkus video yang telah kita tambahkan. Kemudian kita memanfaatkan CSS untuk membuat ukuran video tersebut menjadi responsive. Selamat mencoba.
