Mengakali Video Embed YouTube yang Tak Responsif

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, sayangnya video YouTube memenuhi lebar (width) artikel dan tidak menghormati pengaturan .. width="700" height="400" .. yang sudah saya set sebelumnya.

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

w

Connecting to %s