响应的iframe背景

时间:2013-09-29 10:48:40

标签: css iframe responsive-design

我正在尝试编写类似电视的YouTube视频代码。但在其他决议中似乎很糟糕。

这是我的小提琴:http://jsfiddle.net/QRkL9/3/

这是我的代码: HTML

<div id="wrap-video">
    <img src="http://www.spotcularcarsisi.org/wp-content/uploads/2013/06/lg-tv.jpg" />
<div id="video">
<iframe src="//www.youtube.com/embed/W8vlVksDTe8" frameborder="0"></iframe>
</div>
</div>

这是我的CSS:

#wrap-video  {

    position:  relative;

    padding-bottom:  56.25%; /* 4:3 */
    padding-top: 25px;

    height:  0;

}

#wrap-video img  {

    position:  absolute;

    top:  0;

    left:  0;

    width:  100%;

    height:  100%;

}
#video  {

    position:  relative;

    padding-bottom:  56.60%; /* 4:3 */
    padding-top: 0;
    height:  0;

}

#video iframe  {

    position:  absolute;

    top:  0;

    left:  5%;

    width:  90%;

    height:  77%;

}

感谢任何解决方案或帮助。

0 个答案:

没有答案