Flickr Embed: White space above video with 'Resize for smaller devices' on

[cuemarie]

Description

With 'Resize for smaller devices' on, Flickr Embed Block creates an extra white space above the video.

(Turning off 'Resize for smaller devices' fixes the issue. Also, even with this option off, the aspect of videos is kept properly on smaller devices.)

Step-by-step reproduction instructions

1. Create a new page.
2. Add a Flickr Block and link a video.
3. Make sure 'Resize for smaller devices' is turned ON in the Media settings on the block. (It is on by default)
4. Publish the page.

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.1.1
• Gutenberg 15.4
• FireFox 111.0.1
• Zoologist theme

Originally reported here: Automattic/wp-calypso#74083

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Thelmachido]

When the Gutenberg plugin is deactivated the embed doesn't add the extra white space.

Gutenberg 15.4.0
Twenty Twenty-Three theme
Twenty Twenty-One theme
WP 6.1.1

[Mamaduka]

@cuemarie, is it possible to share an example Flickr video embed URL for testing?

[cuemarie]

Hey @Mamaduka , sure thing! Just tested with this share URL: https://flic.kr/p/2gthFp5

This was just pulled from a quick search for "video" on flickr - opened up the first option, then clicked the Share Photo icon at bottom right and copied the URL. My results:

Screen.Capture.on.2023-04-19.at.13-20-13.mp4

Today's test environment:

• WordPress v 6.2
• Gutenberg 15.5.1
• Firefox 112.0.1
• Theme: Twenty Twenty-Three

[annezazu]

flickr.mov

I can replicate this with WordPress 6.9 and Gutenberg 22.2.

[Mamaduka]

If this isn't coming from the embedded Flickr iframe, it could be a good first issue.