Membuat responsive video dengan css

Jika anda adalah seorang designer web atau designer themes, tentu tidak asing dengan namanya iframe, object atau embed. Ya kode itu kebanyakan untuk menampilkan sebuah video. Video cukup sulit dibuat responsive, jika menggunakan HTML5 tentu cukup mudah dibuat responsive, cukup menggunakan max-width:100% saja. Contoh kode:

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

Lalu bagaimana dengan kode iframe, object dan embed, semisal embed code dari youtube, vimeo, dailymotion dan lainnya. Anda bisa menggunakan trik khusus misal penggunaan position relative dan absolute. Oke langsung saja berikut adalah kode CSS nya:

.video {
 position: relative;
 padding-bottom: 56.25%;
 height: 0;
 overflow: hidden;
}

.video iframe,  
.video object,  
.video embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Jika anda mempunyai blog di blogger.com maka silahkan edit template anda, masukkan kode css diatas sebelum kode ]]></b:skin>
Lalu masukkan contoh kode HTML sebagai berikut dipostingan anda:

<div class="video">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/4L0R4A3oLOg" frameborder="0" allowfullscreen></iframe>
</div>

Yups… seperti contoh diatas setelah memasukkan CSS di style nya lalu anda cukup menambahkan kode <div class="video">kode video</div>

Demo

Sumber:
http://www.bostheme.com/trik-video-responsive-menggunakan-css/