Membuat Responsive Tampilan Video Diberbagai Ukuran Layar

Responsive Tampilan Video Diberbagai Ukuran Layar - Kalau kita peduli tentang hal tampilan web/blog dengan desain yang responsive tentunya kita perlu memperhatikan tampilan yang satu ini "Responsive Tampilan Video", dalam hal ini (contoh) video yang akan kita tampilkan merupakan video yang berasal dari YouTube, dan tidak menutup kemungkinan responsive video ini bisa juga untuk menampilkan video dari situs lain seperti Vimeo atau lainnya.

Dalam hal ini kita hanya mengatur tampilan responsive tersebut hanya dengan menambahkan CSS pada selektor dan tag iframe, tag embed ataupun tag object yang kita pergunakan untuk menampilkan video pada web/blog supaya tampil secara responsive pada berbagai perangkat dan berbagai ukuran.

Sebelum membuat responsive tampilan video pada web/blog, tentunya kita sudah tahu bagaimana caranya menampilkan video pada web/blog, script HTML video yang kita ambil dari situs penyedia video (YouTube) adalah seperti ini:

<iframe width="420" height="315" src="//www.youtube.com/embed/5rILmT8r6VE" frameborder="0" allowfullscreen></iframe>

Ukuran video yang kita tampilkan bisa kita ubah, tapi dengan html tersebut diatas tidak menghasilkan tampilan yang Responsive/Flexible diberbagai ukuran layar, terutama jika kita membuka video tersebut pada perangkat mobile yang ukuran layarnya ralatif lebih kecil dibandingkan layar Komputer atau Tablet, dengan begitu akan menghasilkan tampilan video yang terpotong karena pengaruh layar yang tidak cukup lebar untuk menampilkan ukuran video tersebut, untuk itu kita perlu menambahkan css supaya tampilan video tampil penuh diberbagai ukuran.

Seperti apa tampilan responsive video ini ditampilkan pada berbagai perangkat yang berukuran besar maupun ukuran kecil? kurang lebih tampilannya seperti pada gambar dibawah ini (contoh gambar menggunakan perangkat mobile).

Css yang dipergunakan:

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

dan html video kita bungkus menjadi seperti ini:

HTML

<div class="video-container">
<iframe width="420" height="315" src="//www.youtube.com/embed/5rILmT8r6VE" frameborder="0" allowfullscreen></iframe>
</div>

Semoga bermanfaat.