1

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

<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 太高。
这是小提琴

4

3 回答 3

3

你的比例好像有问题。

试试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 的屏幕截图

nhZBV/4 的屏幕截图

于 2013-11-04T13:47:50.733 回答
2

如果你申请box-sizing: border-box;它工作正常！

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

于 2013-11-04T13:42:17.293 回答
1

这对我有用：

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

示例：http: //jsfiddle.net/nhZBV/3/

于 2013-11-04T13:45:49.030 回答