limeforge

Ah, I’ve found the issue. While FitVids strips out the width and height parameters, it uses them to set the aspect ratio for the video. Hence they are needed.

In other words:

This code works perfectly – it’s responsive and has a correct aspect ratio of 16:9 (the same as 480:270).

<iframe src=”http://www.youtube.com/embed/g7_x3Mz04tY?autoplay=0&rel=0&controls=0&modestbranding&showinfo=0&#8243; frameborder=”0″ width=”480″ height=”270″></iframe>

This code picks up a default ratio of 18:9. I have no idea where it gets this from, but it doesn’t work.

<iframe src=”http://www.youtube.com/embed/g7_x3Mz04tY?autoplay=0&rel=0&controls=0&modestbranding&showinfo=0&#8243; frameborder=”0″></iframe>

I hope this is helpful to anyone else encountering the issue. Obviously you should tweak the height/width to match your video and get the perfect iframe to embed it in.

Thanks again Emil, appreciate your patience and help.

Sorry, I don’t think I’ve explained clearly.

If you click play, you will see that the video is 16:9, while the iframe is 18:9.

I have the same video embeded in this page and it doesn’t suffer from this issue:
http://www.limeforge.com/imaging-2/
On this page, the grid col-940 is split into two grid col-460. This doesn’t suffer vertical bars.

If you click play on both videos, the difference should be obvious. =)

So the difference I can see is that it appears to work in the 460 (yes, 460), but is sized incorrectly in the 940.

Of course.
http://www.limeforge.com/video-test-page/

The page uses the Landing Page (no menu) template, with the following html:
<div class=”wpm-videos”>
<iframe src=”http://www.youtube.com/embed/g7_x3Mz04tY?autoplay=0&rel=0&controls=0&modestbranding&showinfo=0&#8243; frameborder=”0″></iframe>
</div>

The corresponding CSS is:
.wpm-videos {
display: block;
margin: 0 auto;
max-width: 50%;
}