Artikel tutorial ini disusun khusus bagi mereka yang ingin menyematkan video YouTube secara responsif tanpa menggunakan plugin. Cara ini membantu mengurangi beban server dengan menghindari penggunaan plugin yang tidak dimaksimalkan.
Mengapa Memasang Embed Video Youtube Responsive Penting?
Video merupakan elemen multimedia yang memungkinkan pengiriman sinyal elektronik dari suatu gambar bergerak. Salah satu platform utama untuk berbagi video adalah YouTube. Meskipun YouTube menyediakan kode embed, sayangnya, kode tersebut tidak responsif secara default.
Beberapa tema blog tidak responsif ketika menggunakan kode embed dari YouTube. Jika kode embed tersebut tidak responsif pada tema kamu, hal ini dapat mengganggu pengalaman pengunjung.
Bagaimana Cara Memasang Embed Video Youtube Responsive?
Untuk membuat kode embed YouTube responsif di situs web, langkah-langkah berikut perlu diikuti.
- Salin Kode Embed dari YouTube: Klik kanan pada video YouTube yang ingin Anda sisipkan, lalu pilih "Copy embed code."
- Tambahkan Kode CSS dan Selubungi dalam Tag
<div>: Tambahkan potongan kode CSS berikut untuk membuat embed video YouTube responsif.
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Selubungi iframe dengan tag <div> yang memiliki class "videowrapper."
Kesimpulan:
Dengan menambahkan kode CSS tersebut, tampilan embed video YouTube pada artikel menjadi lebih rapi dan responsif.
Responsif adalah elemen kunci dalam desain web dan menjadi penilaian penting Google dalam menentukan peringkat halaman.
Jika Anda mengetahui cara lain yang lebih efisien untuk membuat embed video YouTube menjadi responsif, silakan sampaikan di kolom komentar! Kami terbuka untuk diskusi.
“The way to get started is to quit talking and begin doing.” — Walt Disney
Referensi: Shrink a YouTube video to responsive width