@wistia/wistia-player-react 0.0.0-alpha.57

package/README.md

@@ -0,0 +1,75 @@
+> ⚠️ **Note:** This package is in active development. Updates may unexpectedly introduce breaking changes. Use in production at your own risk.
+
+# Wistia Player React Wrapper
+
+Wistia's React Wrapper of the `<wistia-player/>` web component. Used to add responsive, lightweight, and SEO-friendly videos to your site.
+
+## Getting started
+
+```bash
+npm install @wistia/wistia-player-react
+```
+
+### Simple player
+
+The only required prop is `mediaId`, the ID of the media that will be embedded.
+
+```jsx
+import { WistiaPlayer } from '@wistia/wistia-player-react';
+
+<WistiaPlayer mediaId="abc123" />;
+```
+
+### Player with embed options and event callback
+
+The `<WistiaPlayer>` component takes the same options (as React props) which one can set on the `<wistia-player>` web component. There is a list at the [Embed options](https://wistia.com/support/developers/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';
+
+<WistiaPlayer
+  mediaId="abc123"
+  playerColor="1e64f0"
+  onPlay={() => console.log('Wistia video is playing!')}
+/>;
+```
+
+### Additional Options
+
+#### 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';
+
+<WistiaPlayer mediaId="abc123" aspect={16 / 9} />;
+```
+
+#### 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';
+
+<WistiaPlayer
+  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 `<WistiaPlayer>` component expects to have children.
+
+```jsx
+import { WistiaPlayer } from '@wistia/wistia-player-react';
+
+<WistiaPlayer mediaId="abc123" wistiaPopover={true} popoverContent="link">
+  <span>Popover Link</span>
+</WistiaPlayer>;
+```