Cara Memasang Video YouTube Responsive di Blogger dengan CSS

---

Video YouTube dapat membuat artikel terasa lebih hidup karena pembaca tidak hanya mendapatkan informasi dalam bentuk teks, tetapi juga visual dan audio. Namun, ada satu hal yang sering terlewat saat memasang video ke website atau Blogger: ukuran iframe harus mampu mengikuti lebar layar pengunjung.

Jika embed masih menggunakan ukuran tetap seperti 560 × 315 pixel, tampilannya mungkin terlihat normal di desktop tetapi berpotensi melebar keluar dari area artikel ketika dibuka melalui smartphone. Solusinya cukup sederhana: buat iframe mengikuti lebar kontainer sambil mempertahankan rasio video.

RESPONSIVE VIDEO Satu Embed. Semua Ukuran Layar.

Desktop, tablet, maupun smartphone tetap mendapatkan proporsi video 16:9 yang rapi tanpa perlu menentukan tinggi secara manual.

169

Apa Itu Embed Video YouTube Responsive?

Embed video YouTube responsive adalah video yang disematkan melalui elemen <iframe> dan ukurannya dapat mengikuti ruang yang tersedia pada halaman. Saat lebar halaman berubah, video ikut mengecil atau membesar tanpa kehilangan proporsi aslinya.

DesktopVideo memanfaatkan area konten yang lebih lebar.

TabletUkuran menyesuaikan tanpa merusak rasio.

MobileVideo tetap berada di dalam area artikel.

IDE DASARNYALebar mengikuti container, rasio tetap terjagaKombinasi width:100% dan aspect-ratio:16/9 membuat implementasinya jauh lebih sederhana.

Mengapa Video Perlu Dibuat Responsive?

Tujuan utamanya bukan sekadar membuat iframe terlihat lebih bagus. Responsivitas menjaga pengalaman membaca tetap konsisten ketika artikel dibuka menggunakan perangkat dengan ukuran layar berbeda.

01

Layout Tetap Rapi

Iframe tidak melebar keluar dari area artikel ketika layar mengecil.

02

Nyaman di Mobile

Pengunjung tidak perlu menggeser halaman secara horizontal hanya untuk melihat video.

03

Pengalaman Menonton Lebih Baik

Proporsi video konsisten sehingga player terlihat natural pada berbagai ukuran layar.

04

Selaras dengan Template

Player mengikuti lebar area posting tanpa membutuhkan ukuran berbeda untuk setiap perangkat.

05

CSS Lebih Sederhana

Dengan aspect-ratio, kita tidak lagi membutuhkan trik padding lama untuk video 16:9.

06

Konten Lebih Fleksibel

Kode embed yang sama dapat digunakan pada artikel dengan lebar container berbeda.

Cara Memasang Video YouTube Responsive

Prosesnya hanya membutuhkan kode embed dari YouTube dan satu class CSS. Supaya lebih mudah diikuti, langkahnya saya pisahkan menjadi empat tahap.

01

GET EMBED Ambil Kode Embed dari YouTube

Buka video yang ingin disematkan, pilih Bagikan, kemudian pilih Sematkan. YouTube akan menyediakan kode iframe yang dapat disalin.

02

HTML Masukkan Iframe ke Artikel

Pada Blogger, pindah ke tampilan HTML lalu tempatkan iframe pada posisi video ingin ditampilkan.

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

03

CSS Buat Class Responsive

Gunakan class lokal untuk menentukan rasio 16:9 dan membuat lebar iframe mengikuti area artikel.

<style>
.youtube{
  aspect-ratio:16 / 9;
  width:100%;
  height:auto;
  border:1px solid #ccc;
  box-sizing:border-box;
}
</style>

04

CONNECT Pasang Class pada Iframe

Tambahkan class="youtube" ke iframe. Setelah itu player akan menggunakan aturan responsive yang sudah dibuat.

iframe.youtubeResponsive Video

Kode Final Embed YouTube Responsive

<iframe class="youtube" width="560" height="315" src="https://www.youtube.com/embed/IyL34b8L1II" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

LIVE RESULTPreview Video Responsive

RESPONSIVE

16 : 9

ASPECT RATIO Mengapa Menggunakan 16:9?

Format 16:9 umum digunakan untuk video YouTube. Properti aspect-ratio mempertahankan hubungan lebar dan tinggi saat iframe berubah ukuran.

Memasang CSS di Blogger

Jika class .youtube akan digunakan pada banyak artikel, CSS lebih baik dipasang satu kali pada template Blogger. Dengan begitu, artikel berikutnya cukup menggunakan iframe dengan class tersebut tanpa menulis CSS berulang kali.

HANYA SATU ARTIKEL CSS di Dalam Artikel Praktis untuk penggunaan khusus atau pengujian.

VS

BANYAK ARTIKEL CSS di Template Lebih efisien karena aturan cukup dibuat satu kali.

CODEFLARE TIPGunakan nama class yang konsistenJika template sudah mempunyai style responsive untuk iframe YouTube, periksa terlebih dahulu agar tidak membuat aturan CSS ganda yang melakukan pekerjaan sama.

Kesalahan yang Sering Terjadi

Lebar iframe tetap 560pxPlayer dapat melebar keluar dari artikel pada layar kecil.

Hanya mengatur width:100%Pastikan rasio atau tinggi player tetap dikontrol dengan benar.

CSS global untuk semua iframeAturan terlalu umum bisa memengaruhi iframe peta, form, atau widget lain.

Class CSS tidak samaNama class pada iframe harus sesuai dengan selector yang dibuat di CSS.

WARNING

Hindari menggunakan selector global seperti iframe{width:100%;} hanya untuk memperbaiki video YouTube. Template mungkin memiliki iframe lain seperti Google Maps, form, atau widget yang membutuhkan ukuran berbeda.

Checklist Video Responsive

Iframe menggunakan class khusus.

Lebar player menggunakan width:100%.

Rasio video dipertahankan dengan aspect-ratio.

Player tidak menghasilkan horizontal scroll di mobile.

CSS tidak mengubah iframe lain di template.

Video diuji pada desktop dan smartphone.

Dengan teknik ini, satu kode embed dapat mengikuti berbagai ukuran area posting tanpa harus membuat versi desktop dan mobile secara terpisah. Implementasinya sederhana, tetapi cukup membantu menjaga artikel tetap rapi ketika video menjadi bagian penting dari konten.

CODEFLARE BLOGGER SERVICE Butuh Widget atau Tampilan Blogger yang Responsive?

CodeFlare dapat membantu membuat custom widget, memperbaiki template, mengoptimalkan tampilan mobile, serta membuat komponen HTML, CSS, dan JavaScript sesuai kebutuhan blog.

HUBUNGI CODEFLARE