Youtube shorts don't resize when viewed on mobile

[ashjaneclark]

I am trying to get youtube shorts, embedded via links, to respond to being viewed on mobile by resizing to fit the column like the landscape youtube links do. Instead they are overlapping and look messy when viewed on mobile:

​https://ashchalk.com/video-campaigns/

I have asked various chat bots to help, and I have been online for two hours with WordPress support, they kept suggesting options but we were unable to come to a solution and the problem was not concluded. One issue seems to be that support was suggesting the same things that Claude was suggesting, and they were both referencing menu options in the WordPress interface that I could not see. I'm not sure if they are using instructions for an outdated version of WordPress interface, or if there is a difference in the interface in different countries. But I just need help in fixing what I hope should be a simple issue.

YouTube Shorts embeds are displayed with an incorrect aspect ratio on mobile devices, causing the iframe to overflow its container and break the layout.

This PR adds a targeted CSS rule to ensure Shorts (vertical videos) maintain a proper 9:16 aspect ratio, allowing them to scale correctly within responsive layouts.

@wprashed you need to update the style.css not the RTL version.

Also, this seems like it should rather be a style change for the Embed block in the Gutenberg repo, rather than being something theme-specific? Or is there an issue with the Twenty Nineteen theme which is uniquely causing a problem here?

[sabernhardt]

delete the alignleft class

[sabernhardt]

Columns block, with 3 columns, allowed to stack

[sabernhardt]

Hi and welcome to WordPress Core Trac!

The three embedded shorts have an alignleft class, which sets a minimum width of 280 pixels. The class likely was added when there was an alignment control in the block toolbar. Delete that from each YouTube Embed block, in the Additional CSS Class(es) field under Advanced.

You might also want to move the embeds into Column blocks that are allowed to stack. Then narrower screens would not try to shrink the videos to less than ​200 pixels wide.

I'm not sure if they are using instructions for an outdated version of WordPress interface, or if there is a difference in the interface in different countries.

Your site uses WordPress.com, which has a somewhat different interface than WordPress.org. That might be part of the confusion.

is there an issue with the Twenty Nineteen theme which is uniquely causing a problem here?

The site uses the Saison theme. The PR added CSS for Twenty Nineteen, but I did not find a problem with embedded video shorts in that theme.

I'll close the ticket because this is not a bug with WordPress core.

YouTube Shorts embeds are displayed with an incorrect aspect ratio on mobile devices, causing the iframe to overflow its container and break the layout.

This PR adds a targeted CSS rule to ensure Shorts (vertical videos) maintain a proper 9:16 aspect ratio, allowing them to scale correctly within responsive layouts.

Closing because there are no changes in this PR.

YouTube Shorts embeds are displayed with an incorrect aspect ratio on mobile devices, causing the iframe to overflow its container and break the layout.

This PR adds a targeted CSS rule to ensure Shorts (vertical videos) maintain a proper 9:16 aspect ratio, allowing them to scale correctly within responsive layouts.