Skip to content

Vimeo config does not apply #2032

@modestasd

Description

@modestasd

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",

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions