2014年4月12日土曜日

Youtube動画をレスポンシブ対応表示にするCSS

Youtube動画をレスポンシブ対応表示にするCSS(Responsive Youtube Embed)を試してみました。デザインが崩れず、良い感じです。素晴らしい。

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://www.youtube.com/embed/sampleid" frameborder="0" width="480" height="365"></iframe>
</div>

0 件のコメント:

コメントを投稿