Help Adjusting Responsive Youtube iFrame

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!

    PC

    Hello there David,

    Thanks for posting on the forums.

    Can you kindly try the below CSS please ?

    .wrap {max-width : 850px !important}

    That should fix it up.

    Please advise if that works.

    Cheers, PC

    david
    • 69
    • #1,621

    That did it. Thanks!

    PC

    Hey there @david,

    Glad to help :)

    Thanks for posting back and letting us know !

    Cheers, PC

Join 368713 happy members

Get access to our entire collection of epic plugins, astonishing themes & genius support

Become a member