NotionX / NotionX/react-notion-x

Video blocks prefer fixed block_height over responsive aspect ratio

Open
#708 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
5.4k
Forks
645
PR merge metrics
No merged PRs in 30d

Description

Description

Hi, thanks for maintaining react-notion-x.

I noticed that video blocks can render with a fixed inline height from Notion's
format.block_height even when format.block_aspect_ratio is also available.

This can be hard to notice with a regular 16:9 video, so the Notion test page
below uses a square 1:1 video. In a responsive article layout, a square video is
expected to reserve a square area. If a fixed height such as 320px is applied
instead, the rendered video area can become much shorter than expected and
following content can appear too close to the video.

From react-notion-x@7.10.0, the current asset logic appears to prioritize
block_height for videos:

if (block.type === "video") {
  if (block_height) {
    style.height = block_height
  } else if (block_aspect_ratio) {
    style.paddingBottom = `${block_aspect_ratio * 100}%`
  }
}

I understand this may be intentional to preserve Notion layout fidelity,
especially if users manually resized the video block in Notion. So I am not
sure this should be treated as a bug.

Would you be open to one of these approaches?

  1. Prefer block_aspect_ratio over block_height for video blocks when both are
    available.
  2. Add an option to render video blocks responsively, while keeping the current
    Notion-fidelity behavior as the default.
  3. Document that video block_height is intentionally respected and should be
    overridden by downstream CSS if a responsive layout is desired.

Related context:

  • #34 reported an image height mismatch.
  • #35 changed image handling so block_height is not applied to images.
  • #651 seems related to video rendering more generally, but appears to focus on
    external video sources rather than fixed block_height / responsive aspect
    ratio behavior.

If option 2 sounds acceptable, I would be happy to try a PR with a small opt-in
prop rather than changing the default behavior.

Notion Test Page ID

38f785ff823180ea80cfc415a8d338dc

Public test page:
https://bumpy-aphid-8a3.notion.site/react-notion-x-video-height-test-38f785ff823180ea80cfc415a8d338dc

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the video asset logic described in the issue and reproduce the behavior with the linked Notion test page, which uses a square video. Compare the effects of block_height and block_aspect_ratio, then confirm the intended behavior with maintainers; done should include an agreed implementation or documentation direction and coverage for the reported case.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.