Cara setting video youtube responsive. Termudah!

image by google
Cara setting video youtube responsive pada blogger
 
TutorialMixs - Sobat blogger, apakah anda sudah tau apa itu artinya Responsive? kok di dunia blogger rasanya tidak asing lagi dengan apa tiu yang namanya responsive. template responsive, buat recent post sedikit sedikit responsive, related posts responsive, video responsive,, hmm tetunya tidak asing lagi bukan?

Yabb.. responsisve itu kalo menurut aku orang baru di dunia blogger (tidak seperti maskolis, juragancipir) kenapa tidak bozcipir wae mbak? lebih keren he,e, hmmm tambah ngaco nih omongannya.. ok lanjut terkait responsive, responsive itu kalau tidak salah lho.. mengatur bagaimana media yang kita gunakan itu bisa menyesuaikan otomatis di semua perangkat. baik itu di perangkat PC, gadget, mobil. tab, dan de el el..

nah kali ini aku akan coba share bagaimana cara membuat / setting video youtube yang responsive..
dan ternyata caranya sangatlah mudah kok, sebelumnya juga udah aku coba beberapa blog aku yang menyajikan media youtube. yang awalnya (tidak bisa di play) bagaimana bisa di play coba, tampil aja kagak di versi mobile he,e,  jadi setelh aku setting cara ini, ternyate vide youtube yang tadinya tidak mau tampil sekarang udah bisa tampil denga vitur penyesuaian yang lumayan rapi lah menurut aku.. maklum script ngopi wkwkwk.. piss moga kagak cemburu..

oke langsung saja, beriut kode-kode script yang harus anda cetting
tahap pertama silahkan tambahkan kode CSS berikut di bawah ini..

.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%;
}
trus untuk langkah berkutnya, silahkan gunakan kode berikut ini di setiap embed kode scriptnya youtube di html nya yahh.... beriktu kodenya

<div class="video-container">
         <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>

untuk yang aku cetak tebal dengan warna biru silahkan ganti dengan embed kode yang kita ambil dari youtube..

thxs moga bermanfaat






Share this

Related Posts

Previous
Next Post »
Related Posts Plugin for WordPress, Blogger...