Absolute Fill

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

import React from 'react';
// ---cut---
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:

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 props<AvailableFrom v="4.0.501" />

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

It is registered as a layer in the Remotion Studio timeline.

:::note You can still wrap <AbsoluteFill> in an outer <Sequence>. Timing cascades like nested sequences. :::

import {AbsoluteFill} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill 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:

import {useRef} from 'react';
import {AbsoluteFill} from 'remotion';

const content = <div>Hello, World</div>;
// ---cut---
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 detection<AvailableFrom v="4.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

See also

• Source code for this component