[Bug]: Content overflows outside content area on mobile devices for theme Feelin' Good

[krutidugade]

[Bug]: Content overflows outside content area on mobile devices for theme Feelin' Good

[mpkelly]

Other themes like twentytwentythree / four are doing dynamic resizing of the iframe to avoid this overflow. Is that part of videopress or the theme itself?

This is the resize function that sets the iframe's width and height:

This code is in the script https://v0.wordpress.com/js/next/videopress-iframe.js?m=1674852142 and runs on load. It executes for all themes I checked. The value it uses for the width comes from the parent element, so it depends on the CSS rules used in the parent DOM hierarchy, and in Feelin' Good, those rules are different from those in other themes, where it doesn't overflow.

Let's just make sure we're not breaking other themes in the process:

This is always the tricky part with so many themes out there. But based on how T23 and T24 work today, setting width to be 100% shouldn't have any adverse effects. I will test a fix tomorrow with a mix of themes.

I'll also update the aspect-ratio.

@lsl

[mpkelly]

I have reproduced this and will look at a fix now.

[lsl]

I've drafted a PR, Automattic/jetpack#37025, but I'm still not sure it's the best solution and testing turned out to be problematic anyway.

This looks workable to me with the aspect-ratio change. Let's just make sure we're not breaking other themes in the process:

Other themes like twentytwentythree / four are doing dynamic resizing of the iframe to avoid this overflow. Is that part of videopress or the theme itself?

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• -zen
• 7894295-zen

[mpkelly]

This is turning out to be a tricky issue. The fix is simple in theory but can be made in different places: core, Jetpack, and individual theme files. I've found that most themes don't have this issue, but comparing those with Feelin' Good, I can't see what's different. Ideally, I would make Feelin' Good consistent with them rather than add some special CSS to its theme.

Another option is to update Jetpack in a way that iframe use width:100%; max-width: nnnpx instead of width:nnnpx as the first one will not overflow like the containers. I've drafted a PR, Automattic/jetpack#37025, but I'm still not sure it's the best solution and testing turned out to be problematic anyway.

I also found that the Freddie theme has a similar issue to the one reported here. There are probably others, too, which makes me think that we should fix it in the block. I will try and deploy something tomorrow.