响应youtube视频

Question

在很多地方，我发现这段代码可以让视频负责，但它对我不起作用。

<div id='wrapp'>
<iframe id='player' src="//www.youtube.com/embed/VWSL2SykovA?rel=0"></iframe>
</div>

CSS

#wrapp {
    position: relative;
    padding-bottom:75%;  // video is 4:3 aspect ratio
    padding-top: 25px;
    height: 0;
    width:70%;
    margin:15px auto;
    z-index:2;
    border:medium ridge #b30000;
    border-radius:9px;
}
#player{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

视频，即iframe太高了 这是FIDDLE

Answer 1

你的比例似乎是有害的。

尝试Zurb Foundation

提出的css设置

#wrapp {
  height: 0;
  margin-bottom: 16px;
  margin-left: 30px;
  overflow: hidden;
  padding-bottom: 67.5%;
  padding-top: 25px;
  position: relative;
}

#player {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

jsFiddled here

这是nhZBV / 4的屏幕截图

Answer 2

如果你申请box-sizing: border-box;，它就可以了！

查看更新的小提琴：http://jsfiddle.net/nhZBV/2/

Answer 3

这对我有用：

#wrapp {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

实施例： http://jsfiddle.net/nhZBV/3/