Responsive Video, Embed, Object dan img

Responsive Video, Embed, Object dan img

Responsive sitemap Trik

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.

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-13.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:

1code-line:3-12code-line:3-23code-line:3-3<div class="VideoWrapper">
<iframe src="link video" width="700" height="385"></iframe>
</div>

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

1code-line:4-12code-line:4-23code-line:4-3<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:

1code-line:5-12code-line:5-23code-line:5-3img{
max-width:100%
}

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

1code-line:6-12code-line:6-23code-line:6-34code-line:6-45code-line:6-5img{
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...

Artikel Terkait

  • Highlighter Language Autodetection
    Syntax Highlighter Language Autodetection ini saya dapatkan dari Software Maniacs dan saya terapkan di blog ini hanya saja tampilannya masih menggunakan Syntax Highlighter lama. seperti biasa anda mungkin sudah tau kegunaannya untuk di terapkan di blog, jadi tidak usah di jelaskan tinggal sekarang langsung saja ke cara bagaimana memasang Synta…
  • Judul posting responsive
    Mungkin ada dari sobat sekalian yang mencoba mengatur tampilan posting di homepage agar terlihat rapi saat responsive berjalan, dengan mengakali membuat judul posting sependek mungkin walau pun judul posting tersebut memang sedikit panjang sehingga nantinya judul tidak terlihat bertumpuk dan tidak rapi untuk template yang tidak menerapkan line-hei…
  • widget amoung tanpa javascript
    Memasang widget amoung memang bukan hal yang rahasia bagi blogger, widget among berguna sebagai counter banyak user yang sedang mengunjungi laman di blog kita tapi mungkin penggunaan javascript dari widget ini menambah beratnya dan waktu memuat laman kita dalam blog apalagi blog sobat yang sdah memasang banyak javascript. untuk itu kali ini s…
  • Memperbaiki ukuran thumbnail homepage
    buat sobat blogger yang mengalami masalah pada thumbnail/gambar Post.snippet dan post.thumbnail yang kurang jelas dan tidak sesuai ukuran pada tampilan posting static page/homepage, bisa menggunakan trik ini agar tampilan gambarnya bisa terlihat jelas dan sesuai. caranya cukup mudah dan gak ribet ikuti saja trik berikut perhatikan kode scrip…
  • Memasang meta tag agar blog lebih SEO Friendly
    Salam sobat blogger, share lagi ni buat lebih mengoptimalkan seo pada blog agar bisa tampil di halaman pertama halaman mesin pencari. tapi jangan lantas ini di jadikan trik utama karena masih ada trik trik lain yang perlu sobat lakukan untuk membuat blognya lebih seo, ini hanya sebagaian trik sja yang memang cukup efektif di hasilnya. sudah b…
  • Microformat & Microdata - Rich Snippets
    Lama mungkin tidak share untuk sahabat semua dan rasanya kurang pas jika tidak berbagi, kali ini saya sedikit membahas tentang Microformat & Microdata - Rich Snippets Apa kegunaan dan fungsi Rich Snippets? Rich Snippet digunakan untuk memperjelas atau memberikan deskripsi tambahan dari suatu situs agar pengunjung dengan mudah menemukan t…

15 komentar

  1. Insan Biasa11 Januari 2015 pukul 01.58

    Pertanyaanku di mana meletakkan kode di atas ? Jujur aku tidak tahu di mana letaknya.

    BalasHapus
    Balasan
    1. Dafin defandaky11 Januari 2015 pukul 12.38

      untuk kode di bawah ini letakkan di css

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

      untuk kode berikut tambahkan di video saat membuat posting
      <div class="VideoWrapper">
<iframe height="357" src="http://www.youtube.com/embed/m5_AKjDdqaU?rel=0&hd=1" width="670"></iframe>
</div>

      Hapus
  2. budiliauw8725 Juni 2015 pukul 10.04

    Thanks gan ..
    Ijin sedot ilmu nya.

    BalasHapus
  3. Dedi Setiawan25 Januari 2016 pukul 21.34

    Mantap Gan, ane berhasil setelah sekian lama mencari video agar responsive.
    Thanks artikelnya bermanfaan banget.

    BalasHapus
  4. DenShoim2 Februari 2016 pukul 20.50

    di template yang saya pake di http://pelemsewushop.blogspot.com/p/about.html kok banyak edit yang ga berfungsi ya bro,,salah satunya ini.

    BalasHapus
  5. SMK INSAN MANDIRI1 Maret 2016 pukul 02.22

    gambar sudah diperbaiki pake alt dan title tidak terdetek gimana caranya

    BalasHapus
  6. Continue17 April 2016 pukul 22.44

    ada yang lebih simple lagi gan tingal masukin url embed youtube lalu convert

    BalasHapus
  7. Admin26 Juli 2016 pukul 15.37

    Thanks gan..
    Ini yang ane cari-cari akhirnya berhasil! :D

    BalasHapus
  8. Online Music Arranger30 April 2017 pukul 20.52

    Terimakasih infonya gan....
    salam kenal...

    ONLINE MUSIC ARRANGER
    www.musicarranger.id
    Jasa Aransemen Musik, Pembuatan Lagu, Jingle / Spot Iklan, Soundtrack dan pembuatan musik minus one secara ONLINE.

    BalasHapus

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...