Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@wistia/wistia-player-react

Package Overview
Dependencies
Maintainers
0
Versions
80
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@wistia/wistia-player-react

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

  • 0.0.72
  • npm
  • Socket score

Version published
Weekly downloads
19K
increased by11.97%
Maintainers
0
Weekly downloads
 
Created
Source

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

Keywords

FAQs

Package last updated on 26 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc