@gurupanguji

Centered Post Embeds Design

Problem

Issue #107 reports that YouTube embeds do not fit the article body well. The current post layout styles images, quotes, and code blocks, but it does not define any behavior for embedded iframes inside post content.

Many posts use fixed-width embed markup such as:

<iframe width="560" height="315" src="https://www.youtube.com/embed/..."></iframe>

Without layout rules, those embeds inherit their legacy dimensions and alignment. On wider article columns, they can sit awkwardly rather than feeling intentionally placed.

Goals

1. Improve the visual fit of embedded iframes in blog posts.
2. Keep the first fix simple and layout-only.
3. Avoid rewriting existing post content in this pass.

Non-Goals

1. Do not normalize or wrap all historical embed markup.
2. Do not implement a full aspect-ratio-based responsive video system yet.
3. Do not change non-post pages.

Candidate Approaches

1. Center-only

Add:

.post-content iframe {
  display: block;
  margin: 2.5em auto;
}

Pros:

• Smallest possible patch.
• Improves desktop alignment immediately.

Cons:

• Fixed widths remain fixed.
• Small screens can still be awkward.

2. Center plus basic width safety

Add:

.post-content iframe {
  display: block;
  max-width: 100%;
  margin: 2.5em auto;
}

Pros:

• Still a small layout-only fix.
• Centers embeds and prevents overflow on narrow screens.

Cons:

• Does not fully solve old fixed-height aspect-ratio issues.

3. Full responsive embed system

Wrap videos and use aspect-ratio CSS or wrapper markup.

Pros:

• Best final behavior.

Cons:

• More invasive.
• Likely requires content normalization or helper markup.

Recommendation

Use approach 2 for the first pass.

This keeps the change simple while doing more than centering alone. It improves desktop placement and avoids the most obvious mobile overflow behavior without forcing an archive-wide content rewrite.

Implementation Design

Update _layouts/post.html to style post-body iframes:

• display: block
• max-width: 100%
• margin: 2.5em auto

Keep the selector scoped to .post-content iframe so only blog post embeds are affected.

Verification

1. Check the example post from the issue:
   • _posts/2025-05-08-updates-to-zed-with-even-more-ai.md
2. Confirm the iframe is centered within the article column.
3. Confirm the page still renders cleanly on a narrow viewport.

Follow-up Path

If the result still feels cramped after this pass, the next step should be a focused responsive video system for YouTube embeds using aspect-ratio-aware wrappers.