Vimeo config does not apply

Author: modestasdCreated Mar 10, 2026Updated Mar 19, 2026

The behavior does not seem consistent. Sometimes the Vimeo properties are applied, but other times they are ignored so maybe there is race condition somewhere.

import React from "react";
import { createRoot } from "react-dom/client";
import ReactPlayer from "react-player";

import "./styles.css";

const container = document.getElementById("root");
const root = createRoot(container);

root.render(
  <React.StrictMode>
      <ReactPlayer
        style={{ width: "100%", height: "auto", aspectRatio: "16/9" }}
        src={"https://player.vimeo.com/video/169599296"}
        controls
        config={{
          vimeo: {
            color: "ffffff",
            transparent: true,
          },
        }}
      />
  </React.StrictMode>
);

it just loads default parameters from vimeo-video-element https://github.com/muxinc/media-elements/blob/main/packages/vimeo-video-element/vimeo-video-element.js#L56

Image

codesandbox example: https://codesandbox.io/p/devbox/react-player-forked-t8vv2r?workspaceId=ws_Fkh6gApEJX8sDc9Y7ZFZKg

versions:

"react": "19.2.4",
"react-dom": "19.2.4",
"react-player": "3.4.0",