CSS Responsive Video

Selain gambar dibuat responsive, video juga bisa dibuat responsive dengan css3.

Caranya juga sama, yaitu dengan mengatur width dengan satuan unit yang relative.

Properti width

Atur panjang width menjadi 100%, dengan height auto.

video {
  width: 100%;
  height: auto;
}

Properti max-width

Kita juga bisa mengatur panjang maksimal dengan max-width.

Bedanya dengan width adalah kalau disetting 600px, sedangkan videonya 700px maka videonya yang ditampilkan menjadi 600px.

video {
  max-width: 100%;
  height: auto;
}

Gampang kan kita mengatur video menjadi responsive?

Leave a Comment