npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@wistia/wistia-player-react

v0.0.80

Published

An embeddable wistia-player web component and React wrapper to add responsive, lightweight, and SEO-friendly videos to your site.

Downloads

58,985

Readme

⚠️ 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

npm install @wistia/wistia-player-react

Simple player

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

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 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).

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:

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:

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.

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

<WistiaPlayer mediaId="abc123" wistiaPopover={true} popoverContent="link">
  <span>Popover Link</span>
</WistiaPlayer>;