WordPress.org

Forums

Responsive
[resolved] iFrames resizing to full width. (14 posts)

  1. limeforge
    Member
    Posted 2 years ago #

    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 480x270, this didn't help.

    Any ideas what else I should try?

  2. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    Please see this link. And also remove floats.

    Thanks,
    Emil

  3. limeforge
    Member
    Posted 2 years ago #

    Thanks Emil.

    I've updated to use this method, but I now have a new issue - the video size is 16:9 format 409x230 (at 50%), whereas the iframe is resizing to 460x230 (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?

  4. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    may I see the preview please?

    Emil

  5. limeforge
    Member
    Posted 2 years ago #

    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%;
    }

  6. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

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

  7. limeforge
    Member
    Posted 2 years ago #

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

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

  8. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    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

  9. limeforge
    Member
    Posted 2 years ago #

    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.

  10. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    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

  11. limeforge
    Member
    Posted 2 years ago #

    Perhaps a picture would help explain better?

    http://www.flickr.com/photos/41609483@N06/8221654043/in/photostream/lightbox/

    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. =)

  12. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    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

  13. limeforge
    Member
    Posted 2 years ago #

    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.

  14. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

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

    Thanks,
    Emil

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic