Help Adjusting Responsive Youtube iFrame

On my site:

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="//;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!