Skip to main content

<AbsoluteFill>

A helper component - it is an absolutely positioned <div> with the following styles:

Styles of AbsoluteFill
const style: React.CSSProperties = {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  width: '100%',
  height: '100%',
  display: 'flex',
  flexDirection: 'column',
};

This component is useful for layering content on top of each other. For example, you can use it to create a full-screen video background:

Layer example
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';

const MyComp = () => {
  return (
    <AbsoluteFill>
      <AbsoluteFill>
        <Video src="https://example.com/video.mp4" />
      </AbsoluteFill>
      <AbsoluteFill>
        <h1>This text is written on top!</h1>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

The layers that get rendered last appear on top - this is because of how HTML works.

API​

Inherited propsv4.0.501​

<AbsoluteFill> inherits from, durationInFrames, trimBefore, playbackRate, freeze, hidden, name and showInTimeline from <Sequence>.

From v4.0.528, it also inherits premountFor, postmountFor, styleWhilePremounted and styleWhilePostmounted from <Sequence>.

Clip starting at frame 30, lasting 90 frames
import {AbsoluteFill} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill name="Background" from={30} durationInFrames={90}>
      This layer is visible from frame 30 to 119.
    </AbsoluteFill>
  );
};

ref?​

You can add a React ref to an <AbsoluteFill> from version v3.2.13 on. If you use TypeScript, type it with HTMLDivElement:

MyComp.tsx
const MyComp = () => {
  const ref = useRef<HTMLDivElement>(null);
  return <AbsoluteFill ref={ref}>{content}</AbsoluteFill>;
};

Other props​

All props of a regular <div> element are forwarded, including className, style and event handlers.

TailwindCSS class detectionv4.0.249​

This component has a style object, which has higher importance than className's.

In order to make this behave like you expect (row layout):

<AbsoluteFill className="flex flex-row" />

We detect conflicting Tailwind classes and disable the corresponding inline styles if they are present from Remotion v4.0.249.
Review the source code below to see how we detect Tailwind classes.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​