Cara Membuat Video Responsive

 Membuat Video Responsive Di Widget | Anda pernah memikirkan bagimana caranya pengunjung anda melalui Ponsel dan Gadget menonton Video yang anda lekatkan di Blog/Postingan? Apakah anda  membuat Video Youtube atau Video yang lain Responsive? Bagaimana jika tidak?

Cara Membuat Video Responsive

 Membuat Video responsive memerlukan Dua tahap dan dua tahap cara pemasangan,cara pertama bisa anda lekatkan Menu CSS berikut di Body Template anda,silahkan Login ke blogger anda,masuk ke Edit HTML dan cari kode </b:skin> dan letakkan kode berikut dibawahnya:

<style type='text/css'>
.ResponsiveWrapper {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 */
 padding-top: 25px;
 height: 0;
}
.ResponsiveWrapper iframe, video, object, embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
</style>

Nah jika sudah silahkan anda simpan,sekarang tapa memasang Video,tentu anda akan lekatkan Video dari Youtube bukan? Atau video dari Vimeo bukan?

 Untuk kodenya silahkan Tambahakan <div class="ResponsiveWrapper"> Sebelum Embed Video dan kode </div> Sesudah embed Kode tersebut misal Kode Video yang anda lekatkan andalah seperti ini

<iframe width="420" height="315" src="//www.youtube.com/embed/y1lXOi4l-ss" frameborder="0" allowfullscreen></iframe>

 Setelah menambahkan kode responsive hasilnya seperti ini:

<div class="ResponsiveWrapper"><iframe width="420" height="315" src="//www.youtube.com/embed/y1lXOi4l-ss" frameborder="0" allowfullscreen></iframe></div>

Cara memasang yang ke dua adalah dengan menyisipkan CSS dan HTML sekaligus,namun cara ini sedikit lebih repot dibanding cara yang pertama,untuk kodenya adalah sebagai berikut:

<style type='text/css'>
.ResponsiveWrapper {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 */
 padding-top: 25px;
 height: 0;
}
.ResponsiveWrapper iframe, video, object, embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
</style><div class="ResponsiveWrapper"><iframe width="420" height="315" src="//www.youtube.com/embed/y1lXOi4l-ss" frameborder="0" allowfullscreen></iframe></div>

 Berhubung Template Pathmo yang saya gunakan belum sepenuhnya kelar dan responsive jadi silahkan Anda klik Disini untuk melihat Video yang barusan saya Tutorkan diatas

Catatan :Tutorial Diatas berlaku untuk membuat responsive Video di Postingan Atau Membuat Video Responsive Di Widget.