Agar Embed Video YouTube Menjadi Responsif

Dalam beberapa kasus, embed video Youtube ke situsweb seringkali terkendala masalah ukuran video yang tidak responsif. Hal ini menyebabkan tampilan video saat diakses melalui ponsel cerdas menjadi tidak nyaman dilihat (keluar batas lebar halaman web). Hal seperti ini kadang mengganggu pembaca.

Berikut adalah contoh tampilan yang tidak responsif:

Lalu bagaimana cara mengatasinya? Secara umum, kode embed yang diperoleh dari Youtube adalah markup default yang bisa kita modifikasi tampilannya. Untuk itu, kita hanya perlu menambahkan kode CSS – dengan menambahkan kelas – agar frame video dari Youtube bisa menyesuaikan ukuran kontainer halaman web.

Kode embed Youtube asli:

<iframe src="https://www.youtube.com/embed/3c_McS4_2A8?rel=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Kode embed Youtube setelah ditambah kelas baru:

<div class="responsive-embed-youtube"><iframe src="https://www.youtube.com/embed/3c_McS4_2A8?rel=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

Kode CSS untuk class “responsive-embed-youtube” (ditambahkan lewat editor dengan edit style.css):

.responsive-embed-youtube {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.responsive-embed-youtube iframe, .responsive-embed-youtube object, .responsive-embed-youtube embed {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
        right:10px;
}

Saya telah mencoba trik ini pada beberapa theme WordPress dan berhasil. Namun, tidak menutup kemungkinan trik ini dapat diimplementasikan ke dalam tampilan web yang lain.

Selamat mencoba.