Self-hosted blog: vertical (9:16) videos render inside a forced 16:9 frame

[feruzm]

Vertical (9:16) videos are shown inside a forced 16:9 frame on hosted/self-hosted blogs, so the player is pillarboxed: a thin video between two wide black bars.

Cause

apps/self-hosted renders post bodies with renderPostBody(..., { embedVideosDirectly: true }) and styles every video anchor with a fixed 16:9 box (padding-bottom: 56.25% in blog-markdown.css). On ecency.com the 3Speak player reports its orientation to the parent window (3speak-player-ready message with isVertical / aspectRatio), and EcencyRenderer turns that into a speak-portrait / speak-square class that overrides the aspect ratio. The self-hosted SPA does not run that listener and has no portrait/square rules, so vertical 3Speak videos stay in the 16:9 box.

Truvvl story embeds have the same symptom for a different reason: render-helper marks them iframe.portrait-embed, but the self-hosted generic iframe fallback does not exclude that class and stretches them to 16:9.

Fix

• Listen for the 3Speak 3speak-player-ready message in the self-hosted app and apply speak-portrait / speak-square to the matching video container (post body and comment bodies).
• Add the matching portrait/square rules to blog-markdown.css, using the same aspect ratios and max-widths as ecency-renderer.scss so hosted blogs look like ecency.com.
• Exclude .portrait-embed from the generic 16:9 iframe fallback and give it a 9:16 rule.

Out of scope

YouTube Shorts are embedded at 16:9 as well, but that is not self-hosted specific: render-helper emits no shorts marker, so ecency.com pillarboxes them too. Tracked separately.