WordPress.org

Support

Support » Themes and Templates » [Resolved] iFrames resizing to full width.

[Resolved] iFrames resizing to full width.

  • I have a problem with iFrames resizing to the full page width.

    The embed goes something like this:
    <iframe style=”float: right;” src=”http://www.youtube.com/embed/g7_x3Mz04tY?autoplay=0&rel=0&controls=0&modestbranding&showinfo=0″ frameborder=”0″ width=”480″ height=”270″></iframe>

    This displays perfectly on the preview, but resizes to the full page width when published. I’ve updated my Media settings to have a maximum embed size of 480×270, this didn’t help.

    Any ideas what else I should try?

Viewing 13 replies - 1 through 13 (of 13 total)
  • Emil Uzelac

    @emiluzelac

    Theme Review Admin

    Please see this link. And also remove floats.

    Thanks,
    Emil

    Thanks Emil.

    I’ve updated to use this method, but I now have a new issue – the video size is 16:9 format 409×230 (at 50%), whereas the iframe is resizing to 460×230 (or 18:9). This results in black bars appearing either side of the video.

    The ratios and bars remain the same when the video shrinks as the page is made smaller.

    Any ideas on how to correct that?

    Emil Uzelac

    @emiluzelac

    Theme Review Admin

    may I see the preview please?

    Emil

    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″ frameborder=”0″></iframe>
    </div>

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

    Emil Uzelac

    @emiluzelac

    Theme Review Admin

    Can you post the page back in please? I get 404 🙁

    Apologies, it wasn’t public! It’s visible now. =)

    I should add – you need to click play to see the vertical bars.

    Emil Uzelac

    @emiluzelac

    Theme Review Admin

    Ah, gotcha now it gets to small once on smaller screens.

    All right, so we can do this: Go to your style.css and locate “Responsive (Mobile) Design, where you will see the max-widths from 980 and below, all you need is to change the max-width of 50% to something higher.

    @media screen and (max-width: 980px) {
        .wpm-videos {
            max-width: 75%;
        }
    
    }

    and if needed to similar for the rest of the screens as well.

    Thanks,
    Emil

    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.

    Emil Uzelac

    @emiluzelac

    Theme Review Admin

    I am not the greatest with knowing their ratio just by looking at them, but you can use the same width as col-460.

    .wpm-videos {
        width: 48.936170212766%;
    }

    Emil

    Perhaps a picture would help explain better?

    Comparison

    The bars appear even when the width is set to 100%. Is the iframe/fitvids picking up some sort of left/right padding (inside the frame) from the col-940 perhaps?

    The video also works correctly if I use it for the featured content on the home page.

    Appreciate your assistance with this. =)

    Emil Uzelac

    @emiluzelac

    Theme Review Admin

    Here you go:

    First this is how the video should look like in full width pages without any customizations and the solution.

    Solution is noted as well.

    Emil

    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″ 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″ 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.

    Emil Uzelac

    @emiluzelac

    Theme Review Admin

    My pleasure, if Theme deserves, please write few words here.

    Thanks,
    Emil

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘[Resolved] iFrames resizing to full width.’ is closed to new replies.