GO Blog

Masih tentang responsive, kali ini sesuai dengan judul saya shara cara membuat responsive pada Video, Iframe, Embed dan Object dan img.
membuat responsive Untuk video, iframe, embed dan object pada intinya hampir sama yaitu tetap memberi satuan %. Saat ini embed video yang paling banyak digunakan adalah Youtube, namun terlepas dari youtube ada juga yang menanam langsung pada Hosting atau penyimpanan sendiri dan biasanya untuk pemanggilannya mengunakan tag <video>. dibawah ini merupakan contoh embed code yang paling banyak digunakan:

<video width="500" height="400" src="..."></video>
<iframe width="500" height="400" src="..."></iframe>
<object width="500" height="400" src="..."></object>
<embed width="500" height="400"  src="..."></embed>

Membuat responsive pada video dalam iframe sangatlah mudah, seperti menangani responsive pada grid atau layaout kita tinggal mengaturnya melalui CSS. Dibawah ini merupakan contoh CSS untuk membuat video dalam ukuran penuh sesuai dengan ukuran lebar elemen div diblog.

.VideoWrapper {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 */
 padding-top: 25px;
 height: 0;
}
.VideoWrapper iframe, video, object, embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Langkah untuk menerapkan pada iframe pada embed video VIMEO lihat berikut ini:

<div class="VideoWrapper">
<iframe src="link video" width="700" height="385"></iframe>
</div>

untuk menerapkan pada iframe pada embed video YOUTUBE adalah sebagai berikut:

<div class="VideoWrapper">
<iframe height="357" src="http://www.youtube.com/embed/m5_AKjDdqaU?rel=0&hd=1" width="670"></iframe>
</div>

Untuk Responsive Image / Gambar

pada sebuah Gambar img (image) jika kita menggunakan satuan nilai em dan px misalkan seperti width:900px dan height:700px ini tidak akan berjalan di Responsive, maka kita ubah dengan menggunakan satuan nilai % yaitu seperti: width:80% dan height:80%. namun kita juga tidak harus selalu menggunakan nilai satuan % tapi bisa juga menggunakan langkah alternatif auto sebagai gantinya. untuk mengatasi ukuran gambar yang melewati ukuran induk elemen kita bisa menggunakan max-width:100% cara ini digunakan agar ukuran gambar bisa menyesuaikan sendiri secara proporsional. Prinsip ini juga berlaku untuk iframe, objects dan video.

contoh yang paling umum lihat css di bawah ini:

img{
max-width:100%
}

Atau untuk menampilkan ukuran gambar sesuai dengan ukuran aslinya bisa memkai css seperti berikut:

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

jadi trik di atas sangat mudah di jalankan dan di terapkan untuk mengubah tampilan menjadi responsive dan optimal di dalam tampilan, jadi silahkan sobat coba. sekian saja semoga berguna buat apa yang sobat jalankan...