Wistia Player React Wrapper

Wistia's React Wrapper of the web component. Used to add responsive, lightweight, and SEO-friendly videos to your site.

For more usage information, check out our Wistia Player React Component documentation.

Getting started

``bash
npm install @wistia/wistia-player-react
`

$3

The only required prop is mediaId, the ID of the media that will be embedded.

`jsx
import { WistiaPlayer } from '@wistia/wistia-player-react';

;
`

$3

The component takes the same options (as React props) which one can set on the web component. There is a list at the Embed options support page. The only difference here is that numbers, booleans, etc are expected to be JS values of those types rather than strings. Event callbacks can also be added, formatted in a way which is familiar React development (e.g. the play event would become onPlay).

`jsx
import { WistiaPlayer } from '@wistia/wistia-player-react';

mediaId="abc123"
playerColor="1e64f0"
onPlay={() => console.log('Wistia video is playing!')}
/>;
`

$3

#### Avoiding layout shifts

The player will automatically load in a lightweight placeholder "swatch" image as soon as possible. However, in certain cases (such as server-side rendering) there can still be a slight layout shift while we wait for that placeholder. In order to avoid shift completely, you can explicitly set the aspect of your video:

`jsx
import { WistiaPlayer } from '@wistia/wistia-player-react';

;
`

#### Fixed-size Embeds

The player is responsive by default. If a fixed-size player is better for your use-case, you can pass in width and height values instead:

`jsx
import { WistiaPlayer } from '@wistia/wistia-player-react';

mediaId="abc123"
style={{
width: '640px',
height: '360px',
}}
/>;
`

#### Popovers

Wistia’s “popovers” are video embeds that open in modal overlays when a target element is clicked. For these embeds, there is an explicit, _required_ wistiaPopover prop (true/false) as well as an optional popoverContent prop. If left undefined, the default popoverContent value is thumbnail. For popovers with popoverContent="link, the component expects to have children.

`jsx
import { WistiaPlayer } from '@wistia/wistia-player-react';


Popover Link
;
``