iframe dimensions of recipe videos are way off

  • Resolved RockYourBlog

    (@rockyourblog)


    3 years, 9 months ago

    Hey there,

    a client recently started to produce videos for her recipes.

    After embedding a YT link in a recipe the video is shown in the recipe card. The dimensions of the iframe are way off though. The blog content container width is 780px, but it seems that the iframe gets his width from the main page container (content + sidebar) which is 1170px. Because of that the video is way too big and gets cut off.

    I’m not sure if this is a conflict between serveral CSS rules or if a JS somehow retrieves the wrong value. I tried to force displaying the correct dimensions via CSS, but couldn’t get it to work.

    A caching/minifying issue can be ruled out, because the problem remains if the respective plugins are deactivated.

    Any help is appreciated.

    Cheers

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Brecht

    (@brechtvds)

    Hi there,

    Could you try adding the following to “Recipe CSS” on the WP Recipe Maker > Settings > Custom Style page and see if that fixes things?

    .wprm-recipe-video iframe {
    max-width: 100%;
}
    Thread Starter RockYourBlog

    (@rockyourblog)

    Hey Brecht,

    lighting fast response time as ever! ??

    Done, but I did that already while fiddling with the CSS. The width gets fixed using that rule, the height remains way off, though.

    I tried to force an aspect ratio of 16:9 with dynamic dimensions like described here but couldn’t get it to work.

    Cheers

    Plugin Author Brecht

    (@brechtvds)

    Is the “Force Aspect Ratio” setting enabled on the WP Recipe Maker > Settings > Media page?

    Thread Starter RockYourBlog

    (@rockyourblog)

    It wasn’t, but enabling didn’t fix it. I found the culprit, though.

    If the Plugin Borlabs Cookie is deactivated, the issue is gone. If I activate it again the iframe is way off. Borlabs Cookie has an overlay for YT videos, so that you have to consent before stuff gets loaded from YT. If you clear your cache and don’t accept all cookies while the cookie notice is displayed, you can see the overlay.

    I reverted all changes you suggested and even then its working with Borlabs turned off.

    Seems that Borlabs heavily messes with the iframe, because it inserts the wrong width & height attributes in the iframe html element and your fluid-width-video-wrapper div thats responsible for the aspect ratio gets completely erased from HTML too if the plugin is activated.

    I’d like to continue using the overlay for consent. Do you have an idea how to fix this? Otherwise I’ll give the guys at Borlabs a heads up.

    • This reply was modified 3 years, 9 months ago by RockYourBlog.
    Plugin Author Brecht

    (@brechtvds)

    We’re not the ones adding that fluid-width-video-wrapper either, actually. Essentially, we just output the video embed code exactly like you put it in.

    WordPress itself replaces YouTube links with an embed code and your theme usually takes care of the styling.

    So it should look the same inside and outside of the recipe box.

    I would indeed have to recommend checking with Borlabs.

    Thread Starter RockYourBlog

    (@rockyourblog)

    Oh! Then maybe its a conflict between Borlabs and the theme. Hmm, interesting.

    I’ll dig a little deeper and then contact Borlabs.

    Thanks for your help!

    Edit: Already found a solution. Toggle “Video Wrapper” option under “Borlabs Cookie” -> “Content Blocker” -> “Youtube” and the plugin uses its own wrapper that manages iframe dimensions and aspect ratio.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘iframe dimensions of recipe videos are way off’ is closed to new replies.