動画プレーヤーをレスポンシブにする簡単スニペット【Vimeo/Youtube】

動画プレーヤーをレスポンシブにする簡単スニペット【Vimeo/Youtube】 : フタパパ
http://www.pondad.com/?p=8144

<style scoped>  .video-player{  	position: relative;  	padding-bottom: 56.25%;  	padding-top: 30px;  	height: 0;  	max-width: 100%;  	height: auto;   }  .video-player iframe,  .video-player object,  .video-player embed{  	position: absolute;  	top: 0;  	left: 0;  	width: 100%;  	height: 100%;  }  </style>  <div class="video-player">  <iframe src="//player.vimeo.com/video/72216778?badge=0&amp;color=f0e400" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

iframe内の高さと幅を絶対値absoluteでします。これで実際のプレーヤーの縦横比が維持されます。

そしてiframeの親要素に対してクラスvideo-playerを指定し、これは相対値relativeで16:9の画面にするという方法です。