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_ratio over block_height for 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_height is intentionally respected and should be
overridden by downstream CSS if a responsive layout is desired.
Related context:
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
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_heighteven whenformat.block_aspect_ratiois 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
320pxis appliedinstead, 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 prioritizeblock_heightfor videos: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?
block_aspect_ratiooverblock_heightfor video blocks when both areavailable.
Notion-fidelity behavior as the default.
block_heightis intentionally respected and should beoverridden by downstream CSS if a responsive layout is desired.
Related context:
block_heightis not applied to images.external video sources rather than fixed
block_height/ responsive aspectratio 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