Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
wistia-video-element
✓ import 'wistia-video-element';
✗ const WistiaVideoElement = require('wistia-video-element');
This is a side-effect import that registers the `<wistia-video>` custom element with the browser's CustomElementRegistry. This package ships with TypeScript types.
WistiaVideoElement (class)
✓ import { WistiaVideoElement } from 'wistia-video-element';
For programmatic access to the custom element class, e.g., to extend it or check `instanceof`.
CDN usage (ESM)
✓ <script type="module" src="https://cdn.jsdelivr.net/npm/wistia-video-element@1.0/+esm"></script>
✗ <script src="https://cdn.jsdelivr.net/npm/wistia-video-element@1.0/+esm"></script>
Ensure `type="module"` is used for browser-native ESM loading. Using a specific version (like `@1.0`) in CDN paths is recommended for stability.
Demonstrates how to include and use the `<wistia-video>` custom element in HTML, including script import and basic JavaScript interaction with its HTMLMediaElement API.
<!-- Include the script to register the custom element -->
<script type="module">
import 'wistia-video-element';
</script>
<!-- Or via CDN (recommended for simple cases) -->
<!-- <script type="module" src="https://cdn.jsdelivr.net/npm/wistia-video-element@1.3/+esm"></script> -->
<wistia-video
controls
src="https://wesleyluyten.wistia.com/medias/oifkgmxnkb"
style="width: 100%; max-width: 640px; aspect-ratio: 16/9; display: block;"
></wistia-video>
<script type="module">
const wistiaVideoElement = document.querySelector('wistia-video');
if (wistiaVideoElement) {
// Accessing the standard HTMLMediaElement API
wistiaVideoElement.addEventListener('play', () => {
console.log('Wistia video started playing!');
});
// You can also programmatically control it
setTimeout(() => {
// wistiaVideoElement.pause();
// console.log('Wistia video paused after 5 seconds.');
}, 5000);
}
</script>
Debug
Known issues
gotchaMemory leaks were patched in upstream dependencies like `custom-media-element` (v1.4.6) and `media-tracks` (v0.3.5). To ensure your application benefits from these fixes, ensure `wistia-video-element` is updated to a version that incorporates these dependency updates. Always check the package's `package-lock.json` or `yarn.lock` after installing to confirm the resolved dependency versions.fixUpgrade `wistia-video-element` to the latest stable version: `npm install wistia-video-element@latest`.
affects: <1.3.6 (or any version resolving older dependencies)
breakingThe `wistia-video-element` package from `muxinc/media-elements` is a wrapper around the Wistia player. Changes in Wistia's underlying player API or embedding strategy (e.g., transitions from `window._wq` to `window.wistiaOptions` or different player web components) might require updates to this wrapper package to maintain compatibility. These breaking changes typically originate from Wistia itself.fixMonitor the `muxinc/media-elements` repository for updates and breaking change announcements related to Wistia's player, and upgrade `wistia-video-element` accordingly.
affects: >=1.0.0
gotchaCustom elements must be registered before they are used in the DOM. If you create `<wistia-video>` elements programmatically or place them in your HTML before the import script runs, they will not be recognized and will render as unknown elements.fixEnsure `import 'wistia-video-element';` (or the CDN script) is executed at the top of your main JavaScript bundle or in the `<head>` of your HTML document, typically with `defer` or `type="module"`.
affects: >=1.0.0
gotchaThe `src` attribute or `media-id` property on the `<wistia-video>` element must point to a valid Wistia media ID for the video to load and play correctly. Incorrect or malformed IDs will result in the player not loading content.fixVerify that the `src` attribute (which should contain the Wistia media hashed ID) is correct. Example: `src="https://wesleyluyten.wistia.com/medias/oifkgmxnkb"`.
affects: >=1.0.0
Errors
Common errors & fixes
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "wistia-video" has already been used with this registry.
The `wistia-video-element` script has been imported or loaded multiple times, attempting to register the custom element with the same name twice.
fixEnsure the `import 'wistia-video-element';` statement or the CDN script tag is only included once in your application bundle or HTML page. Check for duplicate script tags or multiple imports in different modules.
Wistia video not appearing or playing / Element renders as `<wistia-video>` but shows no player.
The `src` attribute or `media-id` is incorrect, the Wistia player failed to load, or there's a network issue preventing Wistia assets from being fetched.
fixDouble-check the `src` attribute for the correct Wistia media hashed ID. Open browser developer tools to check the network tab for failed requests to Wistia domains and the console for any Wistia-specific errors.
Uncaught ReferenceError: WistiaVideoElement is not defined (when trying to access the class)
The named export `WistiaVideoElement` was not correctly imported, or the script responsible for defining it did not run.
fixIf accessing the class, use `import { WistiaVideoElement } from 'wistia-video-element';`. If relying on global registration, ensure the side-effect import `import 'wistia-video-element';` runs before attempting to use the element in the DOM or accessing its class. Audit
Dependencies
custom-media-elementrequiredProvides the base class and shared custom element functionality for media elements in the monorepo. wistia-video-element has 1 dependency.