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

  • Kalimaz Responsive Magazine template
    Kalimaz Responsive Magazine template Demo | Download | Setup Template Platform Blogger / Blogspot Nama Template Kalimaz Responsive Magazine blogger template DesignerUong Jowo Instalasi Template- KeteranganTemplate Free Fiture Tempalte Responsive Desain header background slide 3 Kolom Magazine Konten Media Dan F…
  • CSS widget label cloud blogger
    Memperbagus tampilan widget label blogger dengan css, dengan css ini tampilan widget label akan memiliki warna background berbeda di setiap link label tergantung dari color yang kita terapkan di dalam css. untuk menerapakannya ikuti langkah di bawah ini: 1. Masuk Dasboard Blogger 2. Pilih Template 3. Kemudain Pilih Edit HTML 4. Salin CSS be…
  • Membuat Responsive pada ADSENSE
    Mengatasi masalah iklan dari google yang tidak responsive adalah satu trik menyesuaikan tampilan blog agar tampil bagus di resolusi berbeda dan hal ini perlu kita lakukan apa lagi bagi sobat yang memasang di blognya. pada awal Agustus 2013, Google Adsense resmi support untuk dukungan iklan dengan Style Responsive. Untuk saat ini memang masih d…
  • Membuat efek linknudge pada label blog
    Salam sobat blogger, masih senantiasa berbagi untuk sobat semua dan kali ini saya akan share tentang membuat efek linknudge pada label posting blogger. walau pun trik ini sebenarnya dapat di terapkan menggunakan css yang pernah saya tulis disini, namun saya kali ini akan berbagi trik membuat linknudge menggunakan jquery. Blogging CSS SE…
  • Template responsive Mazda DB V.2
    Setelah sebelumnnya saya berbagi template Mazda DB pada kesempatan kali ini saya akan bagikan template personal Mazda DB v2, template yang sudah saya perbaiki ini lebih menarik dari versi sebelumnya dan ada beberapa sedikit ubahan. lihat demo template Mazda DB V.2 responsive Demo Download Beberapa fitur dari template ini : Seo…
  • Membuat posting di homepage warna warni
    salam sahabat blogger yang ganteng - ganteng dan cantek, kali ini saya mau share tentang cara bagaimana agar tampilan postingan di halaman depan atau homepage kita bisa berwarna warni. buat sobat blogger yang tertarik dengan tampilan ini dan ingin memasang di blognya agar tampil menarik tanpa mengganti template silahken di coba dan di kreasika…

15 komentar

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

    BalasHapus
    Balasan
    1. 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. Thanks gan ..
    Ijin sedot ilmu nya.

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

    BalasHapus
  4. 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. gambar sudah diperbaiki pake alt dan title tidak terdetek gimana caranya

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

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

    BalasHapus
  8. 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...