Lazy Load Iframes Doesn’t Maintain 16:9 Ratio

  • Resolved curioussimpleton

    (@streamforte)


    7 months, 3 weeks ago

    Hello,

    With “Lazy Load Iframes” turned on, YouTube embeds do not respect 16:9 aspect ratio on mobile/browser resizing.

    • Tried disabling Responsive Placeholder, did not help solve the issue.
    • Tried disabling Add Missing Sizes, did not help solve the issue.

    Disabling Lazy Load Iframes lets YouTube embeds maintain 16:9 aspect ratio on mobile/browser resizing.

    Is this a known issue? Or is there any workaround I can implement via CSS?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support litetim

    (@litetim)

    7 months, 3 weeks ago

    @streamforte Made a test on a test server and it seems is working. I used Gutenberg and LSC.

    To help you debug it please create a report ID, from LSC => Toolbox => Report => click on “Send to Litespeed” and paste the report ID created.
    If you do not want to share the domain name, just share the path to page.

    Thread Starter curioussimpleton

    (@streamforte)

    7 months, 3 weeks ago

    Hi @litetim

    Report # CSHHGHPP

    Page URL with YouTube embed: https://rpwithai.com/ai-vtuber-neuro-samas-agentic-misalignment/

    In my testing the only thing that worked to make the embed 16:9 on mobile was disabling Iframe lazy load.

    Thank you for taking a look at this!

    Thread Starter curioussimpleton

    (@streamforte)

    7 months, 3 weeks ago

    Sorry missed mentioning this in prev post, also using Gutenberg and the built in block for YouTube embeds. No add on involved in post creation process apart from Yoast SEO.

    If this info is required: CSS minification and removal of unused CSS, and JS minification & defer is handled by: https://wordpress.org/plugins/debloat/

    Plugin Support litetim

    (@litetim)

    7 months, 3 weeks ago

    @streamforte Allright then, see into debloat, what setting/settings are causing the error.
    Is debloat clearing LSC server cache when JS/CSS has changed?

    Thread Starter curioussimpleton

    (@streamforte)

    7 months, 3 weeks ago

    Hi @litetim

    Even with debloat disabled, the problem exists.

    I disabled debloat, cleared cache, checked multiple times. 16:9 ratio isn’t available on phone for YT embeds unless Iframe lazy loading is disabled.

    So this rules out debloat causing any issues. Any idea as to what may be doing this?

    Thread Starter curioussimpleton

    (@streamforte)

    7 months, 3 weeks ago

    Hello,

    Want to let you know I sorted out the issue by adding custom CSS rules to the Iframe. This has sorted out the issue without disabling Iframe Lazy Load.

    .wp-block-embed iframe {
    max-width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    }

    Hopefully if anyone else has an issue similar to mine, this can be helpful.

    Plugin Support litetim

    (@litetim)

    7 months, 3 weeks ago

    @streamforte Great finding! 🙂

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Lazy Load Iframes Doesn’t Maintain 16:9 Ratio’ is closed to new replies.