HRMlblCMFqqInfU78c3NMJxDetM02ycHTU9BqBl9

Cara Membuat Ukuran Video Responsive pada Postingan Blog

Cara Membuat Ukuran Video Responsive pada Blog
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 ke dalam 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>.

Membuat Video Menjadi Responsive dengan Menambahkan Class HTML
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.

Related Posts
Fandi Presly Simamora
Lecturer, code lover, technology enthusiast, enjoys sharing various things through writing, and of course, just a regular human being. Hello world :)

Related Posts

Posting Komentar