Q4 — How to handle long titles in a 16:9 slot
Same real in.gr title (91 chars) shown in 3 strategies. Aspect ratio locked at 16:9 to match video. All shown at 600×338 desktop / 328×184 mobile.
1) Bottom overlay, 2-line clamp + ellipsis
Title sits over the image with a gradient. If the title is too long for 2 lines, it gets cut with "…". Most compact — total height = pure 16:9. What today's storyteller does.
On mobile, "…στον ημιτελικό»" is cut. User sees the start, gets the gist, clicks if curious. Truncation = OK for a discovery widget (the click goes to the full article).
2) Below-frame title strip (separate from image)
Image is pure clean 16:9, title gets its own white strip underneath. No overlay clutter. Adds ~45px on desktop / ~35px on mobile to total height.
Mobile takes ~270px instead of ~212px (+27%). Desktop ~425px instead of ~368px (+15%). Image is pristine — better for visual impact and for video creatives where the brand asset is at the bottom.
3) Smaller text overlay, no clamp (auto-fit)
Same overlay as #1 but smaller font + tighter line-height, so 3-4 lines of long titles fit without truncating. Most info-dense.
12px desktop / 10px mobile is below comfortable reading size — borderline accessibility issue. Title eats most of the image. Compact but feels cluttered.
Strategy 1 (overlay + 2-line clamp) for storyteller. The widget is for discovery, not full reading — clipped titles still convey the topic, and the click takes the user to the full article anyway. It also keeps the widget compact (which you flagged as important).
Tweak: use 14px desktop / 12px mobile (above accessibility floor), 2-line clamp, modest gradient (not full black), and source publisher (e.g. "iefimerida.gr") in tiny caps above. For RSS items where the title has the publisher pattern "Title – Subtitle", we can split on the em-dash and show only the subject part if it's still readable.
Click the strategy you want, or describe a 4th option.