Skip to content

Poster prop not forwarded to HTML video element #2033

@larsvankleef

Description

@larsvankleef

Description

The poster prop is defined in VideoElementProps (see src/types.ts:12) but is never forwarded to the underlying player in Player.tsx. This means setting poster on <ReactPlayer> has no effect for HTML video sources.

Steps to reproduce

<ReactPlayer src="video.mp4" poster="https://example.com/thumbnail.jpg" />

The poster attribute does not appear on the rendered <video> element.

Root cause

Player.tsx explicitly passes a fixed list of props to the underlying player component. poster is not in that list, even though it is typed as a valid prop:

// Player.tsx — poster is missing here
src={props.src}
crossOrigin={props.crossOrigin}
preload={props.preload}
controls={props.controls}
muted={props.muted}
autoPlay={props.autoPlay}
loop={props.loop}
playsInline={props.playsInline}
disableRemotePlayback={props.disableRemotePlayback}

Expected behavior

poster should be forwarded and rendered as an attribute on the <video> element.

Fix

Add poster={props.poster} to the explicit prop list in Player.tsx.

Note on config workaround

Using config={{ html: { attributes: { poster: '...' } } }} (a v2-style API) does not work in v3 — there is no code to unpack config.html.attributes. When config is passed through, it gets spread as a raw prop onto the <video> element, resulting in config=[object Object] in the DOM.

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