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, OffthreadVideo} from 'remotion';

const MyComp = () => {
  return (
    <AbsoluteFill>
      <AbsoluteFill>
        <OffthreadVideo 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.

Adding a ref​

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

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

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​