Help Adjusting Responsive Youtube iFrame

david Inactive
El Presidente
Just Getting Started
69
#1423

On my site: http://bit.ly/1nTclSo

i have a youtube video ifram inside a text widget. I scales down very nicely, my only problem is, it's displayed on my page TOO BIG! I want it to be 850px wide, but this CSS i found makes it much bigger.

If i scale the length/width down to, say, %80, then it's no longer centered.... what am i doing wrong?

It's wrapped up like this:
<div class="js-video [vimeo, widescreen]"><iframe src="//www.youtube.com/embed/rIc5CRWJVCs?vq=hd720;rel=0;showinfo=0;color=white;controls=2;modestbranding=1;autoplay=1; frameborder=0; fs=1;" height="560" width="315"></iframe></div>

Here's the CSS:

/*VIDEO */

.js-video {
height: 0;
padding-top: 0px;
padding-bottom: 56.5%;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}

.js-video.widescreen {
padding-bottom: 57.25%;
}

.js-video.vimeo {
padding-top: 0;
}

.js-video embed, .js-video iframe, .js-video object, .js-video video {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;}

Many thanks!

(0)