Twenty Twenty: video resize functionality also impacts other elements on the page

[jeherve]

Twenty Twenty bundles a functionality named "Intrinsic Ratio Embeds", allowing videos (iframe, object, video) to be automatically resized on demand.

This is practical, but can be problematic for some elements on the page that may not behave like a video, or that may not be in the post content at all.

While plugins can use the .intrinsic-ignore CSS class to avoid being impacted by this, I wonder if we could be a bit more specific within the theme, and only target videos inside the post content. This would avoid conflicting with plugins adding iFrames and / or videos outside of the post content, like in widgets.

[jeherve]

Only target videos inside post content

[lancewillett]

+1 for limiting the scope of this JavaScript script to only look for objects in post content.

[arcio]

Please fix this, not all iframes are videos.

[ianbelanger]

This functionality was added in the theme before we decided to add this add_theme_support( 'responsive-embeds' );. It may no longer be needed. I am going to test this to see if we can remove the whole Intrinsic Ratio Embeds function. Other testing would be appreciated. Thanks for bringing this up @jeherve.

[aidvu]

+1 to limiting the scope of elements the function looks at.

@ianbelanger what more needs to be done here?

[karmatosed]

Moving this to a future release as it has a patch and agreed approach. It now needs testing to check after some time has passed.

[gaisma22]

Patch Testing Report

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/49030/49030.diff

Environment

• WordPress: 7.0-beta6-62085-src
• PHP: 8.3.30
• Server: nginx/1.29.7
• Database: MySQL 8.4.8
• Browser: Brave
• OS: Ubuntu
• Theme: Twenty Twenty 3.0
• MU Plugins: None
• Plugins: None

Steps taken

1. Added a Custom HTML widget to footer containing a YouTube iframe with width set to 560px.
2. Visited the frontend and checked the iframe width via browser console: document.querySelector('.widget iframe').style.width Result before patch: 570px
3. Applied patch from ticket #49030.
4. Hard refreshed the frontend and ran the same console command. Result after patch: ''

✅ Patch is solving the problem

Expected result

Twenty Twenty's Intrinsic Ratio Embeds resize function should only target iframes and videos inside post content, not elements in widgets or other areas outside the post content.

Additional Notes

1. Bug confirmed on WordPress 7.0-beta6 - the resize function was changing the footer widget iframe width from 560px to 570px.
2. After the patch, the footer widget iframe width is no longer modified by the theme JavaScript.
3. Original patch path was missing the src/ prefix. Applied after fixing with sed.

Screenshots/Screencast with results

Before Patch:

After patch:

[gaisma22]

Removing needs-testing.
The patch 49030.diff applied cleanly and was confirmed working on WordPress 7.0-beta6.