0

i'm trying to code a television-like-youtube-video. But it seems bad in other resolutions.

Here's my fiddle: http://jsfiddle.net/QRkL9/3/

And here's my code: 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>

And here's my 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%;

}

Thanks for any solution or help.

mht
  • 80
  • 2
  • 7
  • Could you describe how it looks bad in other resolutions? Like what happens that makes it looks bad, and how you want it to work. – jsea Sep 29 '13 at 11:13
  • as you can see, it looks bad when you change Result page tab's width on jsfiddle. Iframe width is responsive enough and it looks good on TV's screen width. But height is not fit the TV's screen height. – mht Sep 29 '13 at 11:24
  • possible duplicate of [Shrink a Youtube video to responsive width](http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width) – davidcondrey Oct 05 '14 at 00:01

0 Answers0