remotion
remotion copied to clipboard
OffthreadVideo is positioned differently in rendered output than in browser Player
Remotion Version: 4.0.221
Preview Player in browser:
Rendered output:
Using the following component:
import { Loop, OffthreadVideo } from "remotion";
export const LoopedOffthreadVideo: React.FC<{
durationInFrames: number;
src: string;
muted?: boolean;
}> = ({ durationInFrames, src }) => {
if (durationInFrames <= 0) {
throw new Error("durationInFrames must be greater than 0");
}
return (
<Loop durationInFrames={durationInFrames}>
<OffthreadVideo src={src} muted />
</Loop>
);
};
This component is just rendered inside the top-level AbsoluteFill:
<AbsoluteFill style={{ background: bgColor, cursor: "default", userSelect: "none" }}>
<LoopedOffthreadVideo
durationInFrames={bgVideoDurationInFrames}
src={bgMediaUrl}
muted={true}
/>
// Other components
</AbsoluteFill>