Bug: Vimeo dnt config not applied in react-player v3.x.x

[psaelango]

🐛 Bug: dnt (Do Not Track) option missing in Vimeo iframe in react-player v3.x.x

Description

When using react-player v2.x.x, passing the dnt option via playerOptions correctly reflects in the rendered Vimeo iframe. However, after upgrading to react-player v3.x.x, the same configuration (adjusted to the new API) does not apply dnt=1 or other expected Vimeo parameters.

---

✅ Expected Behavior (v2.x.x)

<ReactPlayer
  url="https://vimeo.com/76979871"
  controls={true}
  config={{
    vimeo: {
      playerOptions: {
        dnt: true,
      },
    },
  }}
/>

Rendered iframe:

<iframe src="https://player.vimeo.com/video/76979871?title=0&amp;byline=0&amp;portrait=0&amp;playsinline=0&amp;autopause=0&amp;dnt=1&amp;app_id=122963"
        width="480" height="270"
        frameborder="0"
        allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
        referrerpolicy="strict-origin-when-cross-origin"
        title="The New Vimeo Player (You Know, For Videos)"
        data-ready="true"
        style="width: 100%; height: 100%;">
</iframe>

✅ dnt=1 is correctly included.

---

❌ Actual Behavior (v3.x.x)

<ReactPlayer
  src="https://vimeo.com/76979871"
  controls={true}
  config={{
    vimeo: {
      dnt: true
    }
  }}
/>

Rendered iframe:

<iframe src="https://player.vimeo.com/video/76979871?preload=metadata&amp;transparent=0"
        frameborder="0"
        width="100%" height="100%"
        allow="accelerometer; fullscreen; autoplay; encrypted-media; gyroscope; picture-in-picture"
        data-ready="true">
</iframe>

❌ dnt=1 and other custom Vimeo options are missing, despite being passed in the config.

---

🔍 Root Cause Analysis

• In [email protected], Vimeo support is lazy-loaded from [vimeo-video-element](https://www.npmjs.com/package/[email protected]), a custom web component:

  const Players: PlayerEntry[] = [
    {
      key: 'vimeo',
      name: 'Vimeo',
      canPlay: canPlay.vimeo,
      player: lazy(() => import('vimeo-video-element/react')),
    },
  ]
  

• When <vimeo-video> is used directly, config works correctly:

  <vimeo-video
    src="https://vimeo.com/76979871"
    controls={true}
    config={{ dnt: true, title: 0, byline: 0, portrait: 0 }}
  />
  

  ✅ config is passed as a property, so dnt=1 appears in the iframe URL.

• When used via react-player, the config.vimeo object:

  • May not be passed to the <vimeo-video> element
  • Or is passed too late (after iframe creation)
  • Or is passed incorrectly (e.g. as a string attribute instead of a JS object property)

---

📊 Summary Table

Approach	dnt=1 in iframe?	Reason
<vimeo-video ... />	✅ Yes	React sets the config property early and correctly
<ReactPlayer ... />	❌ No	config not passed properly to the custom element

---

🛠️ Suggested Fix (Hypothesis)

Ensure that react-player correctly forwards config.vimeo as a property (element.config = { ... }) rather than an attribute, and that it is passed before the <vimeo-video> component builds the iframe.

This might require:

• Using a ref to set the config on the custom element directly
• Ensuring it's done before the element’s connectedCallback() lifecycle runs in vimeo-video-element

---

🧪 Environment

• react-player: 3.3.1
• vimeo-video-element: 1.5.3
• Browser: Chrome 116, Firefox 117
• OS: macOS sequoia 15.6.1

---

💬 Additional Notes

• This appears to be a regression from v2 behavior.
• Affects privacy compliance, especially in regions requiring Do Not Track.
• Also impacts other parameters like title, byline, portrait, etc.

---

[luwes]

This does work on my end, see: without SSR https://codesandbox.io/p/devbox/react-player-youtube-config-forked-tkgkjx?workspaceId=ws_4oiUp7kyf42YNzonAeR4qQ with SSR https://media-elements-nextjs.vercel.app/vimeo-video (color is set)

Can you provide a repro? thanks