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:

tsx

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:

tsx

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>;
};

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):

tsx

<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

Adding a ref

TailwindCSS class detection<AvailableFrom v="4.0.249" />

Compatibility

See also