Cara Agar Video Youtube, Vimeo dll Responsive di WordPress

0
84

Cara Agar Video Youtube, Vimeo dll Responsive di WordPress – Palingtahu.com, Saat ini sudah banyak tema atau template wordpress self-hosted yang responsive. Tema yang responsive akan tampil menyesuaikan ukuran dengan perangkat atau gadget yang dipakai user saat mengakses halaman suatu website.

Namun, salah satu masalah yang kerap muncul adalah video embed baik dari Youtube, Vimeo, dll yang tidak responsive pada tema wordpress.

Masalah ini tentu akan mengganggu penampilan dan performa website saat diakses menggunakan smartphone. Lalu, bagaimana cara agar video responsive di WordPress?

Ikuti tutorial dibawah ini :

1. Pertama login ke wordpress self-hosted kamu

2. Langkah kedua, pilih menu Appearance, lalu klik Editor.

Cara agar video responsive di WordPress
Cara agar video responsive di WordPress (Foto : Palingtahu.com)

Tampilan pertama dari Editor adalah Stylesheet (style.css). Scroll sampai ke bagian terbawah, dan paste kode di bawah ini :

.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%;
}

Lihat hasilnya seperti gambar di bawah ini :

Cara agar video responsive di WordPress
Cara agar video responsive di WordPress (Foto : Palingtahu.com)

Setelah itu, jangan lupa klik Update File untuk menyimpan perubahan. Langkah selanjutnya adalah melakukan embed kode video ke WordPress.

Kli tab text pada editor postingan wordpress, kemudian copy kode embed dari Youtube, Vimeo dll.

Diantara kode embed video, pasang kode berikut ini :

<div class=”video-container”>
KODE EMBED VIDEO
</div>

Hapus KODE EMBED VIDEO dan ganti dengan kode embed Anda. Lihat gambar dibawah ini :

Cara agar video responsive di WordPress
Cara agar video responsive di WordPress (Foto : Palingtahu.com)

Setelah itu klik PUBLISH jika artikel sudah selesai. Selamat mencoba dan semoga berhasil. Jangan lupa SHARE!

Berikan Komentar Anda!

SHARE

LEAVE A REPLY

Please enter your comment!
Please enter your name here