Skip to main content

Embedding transparent videos

You can embed transparent videos in Remotion.

With an alpha channel​

To embed a video which has an alpha channel, use the <OffthreadVideo> component with 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 />;
};
tsx
import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';
 
export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('transparent.webm')} transparent />;
};

Without an alpha channel​

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

tsx
import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';
 
export const MyComp: React.FC = () => {
  return (
    <OffthreadVideo
      src={staticFile('nottransparent.mp4')}
      style={{
        mixBlendMode: 'screen',
      }}
    />
  );
};
tsx
import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';
 
export const MyComp: React.FC = () => {
  return (
    <OffthreadVideo
      src={staticFile('nottransparent.mp4')}
      style={{
        mixBlendMode: 'screen',
      }}
    />
  );
};

Greenscreen effect​

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

Rendering transparent videos​

To export a video with transparency, see Transparent videos