Membuat Responsive Tampilan Video Diberbagai Ukuran Layar

Betapa pentingnya membuat desain yang Responsive untuk Video yang ditampilkan pada web/blog supaya menghasilkan tampilan yang penuh pada setiap ukuran layar

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).

Responsive Video YouTube/Vimeo


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.

8 comments:

  1. mantap gan.... terima kasih banyak (y) sukses

    ReplyDelete
  2. Mau nyari yang lebih simple sob, yang tinggal pasang aja :)

    salam kenal ya

    ReplyDelete
  3. terimakasi tutorialnya bro, sangat membantu

    ReplyDelete
  4. Trims, Pak. Saya coba di joomla dan langsung berhasil. Tampilan via phone dan destop jadi sesuaikan ukuran layar.

    ReplyDelete
  5. Ini ni yang saya cari2,,
    Thanks Gan Sangat bermanfaat tutorialnya

    ReplyDelete
    Replies
    1. Mantap Bangeeetttt,, gak pake lama , saya terapkan di web saya gak ada 5 menit kelar,, dan responsive di semuaa layar,, nuwun gan...

      Delete

Terima Kasih Atas Komentar Anda

  • +Bagikan
  • +Admin