Skip to content

@remotion/media: Add objectFit prop to <Video>#6924

Merged
JonnyBurger merged 6 commits intomainfrom
feature/media-video-object-fit
Mar 30, 2026
Merged

@remotion/media: Add objectFit prop to <Video>#6924
JonnyBurger merged 6 commits intomainfrom
feature/media-video-object-fit

Conversation

@JonnyBurger
Copy link
Copy Markdown
Member

@JonnyBurger JonnyBurger commented Mar 30, 2026

Summary

  • Adds an objectFit prop to the <Video> component from @remotion/media, supporting 'contain' (default), 'cover', 'fill', 'none', and 'scale-down'
  • Detects and warns when objectFit is passed via style or CSS class names (e.g. Tailwind's object-cover), since CSS object-fit on <canvas> is not officially supported
  • Adds documentation with AvailableFrom tag and a test composition (ObjectFitTest) with a schema-driven dropdown to switch between modes

Test plan

  • Open Remotion Studio (cd packages/example && bun run dev)
  • Navigate to video-tests/ObjectFitTest
  • Switch objectFit between cover, contain, fill, none, scale-down using the props panel
  • Verify each mode displays correctly on the portrait canvas (1080×1920) with a landscape video
  • Verify passing objectFit via style logs a console warning
  • Render a frame with objectFit: 'cover' and confirm the output is correct

🤖 Generated with Claude Code

@JonnyBurger @claude
@remotion/media: Add objectFit prop to <Video>
8163ba0 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Mar 30, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
bugs Ready Ready Preview, Comment Mar 30, 2026 11:45am
remotion Ready Ready Preview, Comment Mar 30, 2026 11:45am

Request Review

JonnyBurger and others added 3 commits March 30, 2026 11:42
@JonnyBurger @claude
@remotion/eslint-plugin: Add no-object-fit-on-media-video rule
8f8d4bc 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@JonnyBurger @claude
docs: Simplify objectFit note
71e1c8f 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@JonnyBurger
classname
7a39360
@JonnyBurger JonnyBurger marked this pull request as ready for review March 30, 2026 09:46
@pullfrog
Copy link
Copy Markdown
Contributor

pullfrog bot commented Mar 30, 2026 •
edited
Loading

Reviewed PR #6924 and submitted feedback. Found one bug (objectFit prop silently dropped in <OffthreadVideo> fallback path) and one minor messaging issue in the runtime warning.

Task list (6/6 completed)
  • Read the full diff and identify major areas of change
  • Review core implementation: props, video-for-preview, video-for-rendering, video.tsx
  • Review ESLint plugin rule and tests
  • Review runtime CSS warning detection (warn-object-fit-css.ts)
  • Review docs, example, and exports
  • Self-critique and submit review
Pullfrog  ｜ [View workflow run](https://github.com/remotion-dev/remotion/actions/runs/23738455521/job/69149086676) ｜ Triggered by [Pullfrog](https://pullfrog.com) ｜ Using `Big Pickle` (free) ｜ [𝕏](https://x.com/pullfrogai)

pullfrog[bot]
pullfrog bot reviewed Mar 30, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@pullfrog pullfrog bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: The objectFit prop is not forwarded when VideoForRendering falls back to <OffthreadVideo>. At video-for-rendering.tsx:424, the fallback passes style={style} (the raw user style) but doesn't include objectFitProp. The user's objectFit prop is silently dropped in this path.

Pass styleWithObjectFit instead of style there — <OffthreadVideo> renders to <img> (a replaced element), so CSS object-fit via inline style works correctly.

Pullfrog  ｜ Fix all ➔ ｜ Fix 👍s ➔ ｜ View workflow run ｜ Using Big Pickle (free) ｜ 𝕏

@pullfrog
Copy link
Copy Markdown
Contributor

pullfrog bot commented Mar 30, 2026 •
edited
Loading

Addressed both review findings: forwarded objectFit prop through styleWithObjectFit in the <OffthreadVideo> fallback path (video-for-rendering.tsx:424), and corrected the warning message to reference object-* CSS class names instead of className="object-fit" (warn-object-fit-css.ts:35).

Task list (4/4 completed)
  • Fix: Pass styleWithObjectFit instead of style in VideoForRendering OffthreadVideo fallback
  • Fix: Update warning message in warn-object-fit-css.ts to say object-* instead of object-fit
  • Build and verify changes
  • Commit, push, reply to comments, and resolve threads
Pullfrog  ｜ [View workflow run](https://github.com/remotion-dev/remotion/actions/runs/23742840601/job/69163917315) ｜ Triggered by [Pullfrog](https://pullfrog.com) ｜ Using `Big Pickle` (free) ｜ [𝕏](https://x.com/pullfrogai)

@JonnyBurger JonnyBurger merged commit 9b2e063 into main Mar 30, 2026
20 checks passed
@JonnyBurger JonnyBurger deleted the feature/media-video-object-fit branch March 30, 2026 12:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@pullfrog pullfrog[bot] pullfrog[bot] left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@JonnyBurger