Membuat Tampilan video responsive / elastic Video untuk Youtube dan vimeo

Elastis Video HTML5

demo

Dengan HTML5, Anda dapat dengan mudah membuat elastis video dengan trik "max-width: 100%" (lihat demo elastis video HTML5). Trik ini tidak bekerja jika kode embed menggunakan iframe atau objek tag yang umum digunakan oleh sebagian besar situs berbagi video seperti YouTube dan Vimeo.

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

Elastis Objek dan Iframe Embedded Videos

demo

Caranya sangat sederhana. Anda hanya perlu memasukkan kode embed dengan <div> kontainer dan menentukan 50% sampai 60% didalam padding. Kemudian tentukan sub-elemen (iframe, objek embed) lebar 100%, tinggi 100%, dengan posisi absolut. Hal ini akan memaksa elemen embed untuk memperluas Fullwidth otomatis. css

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

HTML

<div class="video-container">
 <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

Cara Membuat Fixed Width dan Elastic

Untuk membatasi lebar video, dan menentukan nilai lebar tetap dengan trik max-width: 100% CSS

.video-wrapper {
 width: 600px;
 max-width: 100%;
} 

HTML

<div class="video-wrapper">
 <div class="video-container">
  <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
 </div>
 <!-- /video -->
</div>
<!-- /video-wrapper --> 

Trik ini bekerja pada semua browser (diuji pada Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone dan iPad).
Contoh yang saya test 
disini
 cara kerja: apabila jendela browser dikecilkan, maka Video akan menyesuaikan.

Source