Css problem

[leandros21]

I have to add an image looks like a frame and inside of frame a youtube iframe video, the problem is that does not fit in any way i tried and is not responsive too.

 

This is the container of the iframe

<div class="video fluid-width-video-wrapper" data-ratio="16:9">

 

and its css code

background: url('http://example.tv/wp-content/uploads/2014/11/screen-frame-v1.png') no-repeat;

1. width: 100%;
2. position:relative;
3. padding:0;
4. background:#000;
5. height:600px;
6.  
7. and here is the iframe

<iframe title="YouTube video player" width="706" height="304" src="http://www.youtube.com/embed/abcd1234?wmode=opaque&rel=0&showinfo=0&modestbranding=0" frameborder="0" allowtransparency="true"></iframe></div>

 

iframe's css below:

 

1. position: absolute;
2. padding-bottom: 56.25%;
3. padding-top: 30px;
4. overflow: hidden;

Can somebody helps me please? I added the frame for better results

[fidgetwidget]

The screen area isn't quite evenly divided for some reason... but make sure you pad with %values to ensure it will be responsive. 

 

Hope this helps:

 

http://jsbin.com/yetayawema/1/edit?html,output