NotionX / NotionX/react-notion-x
Video blocks prefer fixed block_height over responsive aspect ratio
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?
- Prefer
block_aspect_ratiooverblock_heightfor video blocks when both are
available. - Add an option to render video blocks responsively, while keeping the current
Notion-fidelity behavior as the default. - Document that video
block_heightis 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_heightis not applied to images. - #651 seems related to video rendering more generally, but appears to focus on
external video sources rather than fixedblock_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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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