css - 响应式 iframe 背景

Question

我正在尝试编写类似电视的 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%;

}

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