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!

    • Elite
    • 50
    • #2,687

    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

    • 69
    • #1,874

    That did it. Thanks!

    • Elite
    • 50
    • #2,687

    Hey there @david,

    Glad to help :)

    Thanks for posting back and letting us know !

    Cheers, PC


We pride ourselves on our level of customer support and responsiveness to member requests. Your WordPress experience will never be the same

Become a member

  • PayPal Partner