Skip to content

Video blocks prefer fixed block_height over responsive aspect ratio #708

Description

@lurgi

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:

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions