Quick Start Guides

Wistia's latest version of our player embed is a custom HTML web component (<wistia-player) which can be dropped right into your page or included with your site's build pipeline. We also have a React component wrapper of <wistia-player> for convenience.

Hosted HTML

When getting an embed code through Wistia's in-app interface, you'll usually receive a chunk of code which looks something like the following:

<script src="https://fast.wistia.com/embed/abc123.js" async type="module"></script>
<script src="https://fast.wistia.com/player.js" async></script>

<style>
  wistia-player[media-id='abc123']:not(:defined) {
    background: center / contain no-repeat
      url('https://fast.wistia.com/embed/medias/abc123/swatch');
    display: block;
    filter: blur(5px);
    padding-top: 56.25%;
  }
</style>

<wistia-player media-id="abc123"></wistia-player>

This code can be dropped directly into your site's HTML to render a Wistia player.

If you're looking for ways to programmatically customize and manipulate your embed code, we've got you covered in our Embed API Documentation.

If you want your embed to be a popover, you can check out our Popover Embed API Documentation.

npm

We've also created an npm package @wistia/wistia-player which can be included in your app's build pipeline.

To use it, first run this command in your project folder:

npm install @wistia/wistia-player

Now that the player package has been added to your app, you can import it and use it wherever you want to render a player in HTML:

import '@wistia/wistia-player';

// However you render in your JS app:
<wistia-player media-id="abc123"></wistia-player>

Or, you can create a <wistia-player> element using only JavaScript:

import '@wistia/wistia-player';

const player = document.createElement('wistia-player');
player.mediaId = 'abc123';

document.body.append(player);

React

If your project uses React, we've created a wrapper component for <wistia-player> which lives in the @wistia/wistia-player-react npm package.

To use it, first run this command in your project folder:

npm install @wistia/wistia-player-react

And now that the player package has been added to your app, you can import the WistiaPlayer wrapper component and use it wherever you want to render a player:

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

export default function App() {
  return (
    <WistiaPlayer mediaId="abc123" />
  );
}

For more information on the React component and how you can use it to avoid content shift on your page, check out our React Component Documentation.