Skip to main content

Embedding transparent videos

You can embed transparent videos in Remotion.

With @remotion/media​

Transparent videos with an alpha channel are natively supported by <Video> from @remotion/media.

MyComp.tsx
import React from 'react';
import {Video} from '@remotion/media';
import {staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <Video src={staticFile('transparent.webm')} />;
};

Without an alpha channel​

To embed a video which does not have an alpha channel but has a black background, add mixBlendMode: "screen" to the style prop of the <Video> component.

MyComp.tsx
import React from 'react';
import {Video} from '@remotion/media';
import {staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <Video
      src={staticFile('nottransparent.mp4')}
      style={{
        mixBlendMode: 'screen',
      }}
    />
  );
};

With <OffthreadVideo>​

To embed a video with an alpha channel using <OffthreadVideo>, enable the transparent prop.

MyComp.tsx
import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('transparent.webm')} transparent />;
};

Greenscreen effect​

To remove a background based on the color of the pixels, see the Greenscreen page.

Rendering transparent videos​

To export a video with transparency, see Transparent videos