Vertical Responsive embed video height too long on Desktop

[hyzen-1]

Describe the current behavior

PeerTube vertical/portrait/9:16 videos are being stretched vertically on WordPress Gutenberg desktop, but the videos appear fine on mobile.

Instagram Reels and TikTok iframe embed vertical videos appear just fine on desktop (and mobile).

The screenshot below is from the Chrome browser with 25% zoom instead of 100%, and it still doesn't fit on my screen.

Steps to reproduce

1. Find a vertical video.
2. Click share, then click embed.
3. Select Responsive embed, Display video title, P2P, Display player control bar, then copy the iframe embed code.
4. Paste the iframe embed code on WordPress 6.8.1 by using the Custom HTML block (WordPress Gutenberg).
5. The video will unnecessarily stretch vertically on desktop, but on mobile, it displays fine.

Describe the expected behavior

Vertical videos shouldn't be stretched vertically on desktop, it should look like the mobile version.

PeerTube Responsive embed should look like Instagram Reels and TikTok iframe embed vertical videos.

TikTok iframe embed desktop example below:

Additional information

• PeerTube instance:

  • URL: https://video.lookintopalestine.com/w/2XWTzNgEA5GDp1haUUVMxc
  • Version: 7.1.1
  • NodeJS version: v20.19.1
  • Ffmpeg version: 5.1.6-0+deb12u1

• Browser name, version and platforms on which you could reproduce the bug: Chrome, Version 136.0.7103.93 (Official Build) (64-bit), Windows 11

• Link to browser console log if relevant:

• Link to server log if relevant (journalctl or /var/www/peertube/storage/logs/):

[Chocobozzz]

I think we can migrate to aspect-ratio CSS property, but it's not supported by old web browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio (iOS < 15 for example).

For example:

    <iframe
      title="Two-Tier Policing (first test)"
      src="https://video.lookintopalestine.com/videos/embed/2XWTzNgEA5GDp1haUUVMxc"
      frameborder="0"
      allowfullscreen=""
      sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
      style="aspect-ratio: 9/16; width: 100%; height: 100%"
    ></iframe>

[MadMan247]

I'm and advocate for the aspect-ratio: 16 / 9; CSS An example of a browser that does not support this is Pale Moon (even though its user agent claims to be very new).

[hyzen-1]

I think we can migrate to aspect-ratio CSS property, but it's not supported by old web browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio (iOS < 15 for example).

For example:

<iframe
  title="Two-Tier Policing (first test)"
  src="https://video.lookintopalestine.com/videos/embed/2XWTzNgEA5GDp1haUUVMxc"
  frameborder="0"
  allowfullscreen=""
  sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
  style="aspect-ratio: 9/16; width: 100%; height: 100%"
></iframe>

Thank you for your response.

I've added the following code on https://lookintopalestine.com/peertube-test-1/:

<iframe
  title="Two-Tier Policing (first test)"
  src="https://video.lookintopalestine.com/videos/embed/2XWTzNgEA5GDp1haUUVMxc"
  frameborder="0"
  allowfullscreen=""
  sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
  style="aspect-ratio: 9/16; width: 100%; height: 100%"
></iframe>

It looks great on mobile:

But the video is still quite big on desktop (14 inch laptop screen):

But I think the following code is spot on for both desktop and mobile on https://lookintopalestine.com/peertube-test-2/:

 <iframe
  title="Two-Tier Policing (first test)"
  src="https://video.lookintopalestine.com/videos/embed/2XWTzNgEA5GDp1haUUVMxc"
  frameborder="0"
  allowfullscreen=""
  sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
  style="aspect-ratio: 9/16; width: 100%; height: 100%;
  max-width: 325px;
  display: flex;
  justify-content: center;"
 ></iframe>

I've also added display: flex; and justify-content: center; to make the video centered on desktop just like TikTok's iframe embed code.