我正在尝试编写类似电视的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%;
}
感谢任何解决方案或帮助。