Mengakali Video Embed YouTube yang Tak Responsif

23 Sep, 2017

Saya baru tahu, ternyata selama ini video YouTube hasil embed tidak responsif. Jadi, meskipun tema blog yang kita gunakan sangat keren dan responsif, hasil video YouTube yang tertanam (embed) akan “tumpah” layaknya perut gendut di atas ikat pinggang ketika blog kita dibuka melalui ponsel atau perangkat dengan resolusi kecil.

Lalu bagaimana cara mengatasinya?

Setelah mbebek, ketemulah salah satu artikel untuk menjadikan video YouTube tampil secara responsif. Omong-omong, tak hanya satu dua orang narablog saja yang mengalami masalah serupa mengingat tips atau tutorial yang muncul di mesin pencari juga banyak dan solusi paling banyak adalah memanfaatkan CSS.

Langsung saja, kita cukup copas skrip di bawah ini ke berkas stylesheet CSS.

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

Di kemudian hari, video YouTube akan menjadi responsif saat kita memasukkan skrip embed ke dalam div dengan class video-container.

Saya sudah bereksperimen dengan cara tersebut melalui Kabar Linux (situs mati), sayangnya video YouTube memenuhi lebar (width) artikel dan tidak menghormati pengaturan .. width="700" height="400" .. yang sudah saya set sebelumnya.

#Tutorial