ContextQMD
Back to Remotion

Embedding transparent videos

packages/docs/docs/videos/transparency.mdx

4.0.5091.6 KB
Original Source

You can embed transparent videos in Remotion.

With @remotion/media

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

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.

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.

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