Wistia's New Player: Aurora

Aurora Embed Anatomy

Standard and Popover embeds contain two essential elements:

The player.js script, which renders the video player visually and controls all player functionality
The <wistia-player> component, a container for the aurora player which points to a media hashed_id

Also included are two optional elements that are beneficial for loading when present:

The /embed/<media-id>.js script, which contains media data that enables immediate video playback
A block of <style> tags that define the swatch element, a preview image that displays before the video loads and helps prevent layout shifts on the page

Fallback (iframe) embeds are comprised of just an <iframe> element and the <player.js> script.

The iframe src will also have a ?web_component=true parameter, indicating an Aurora iframe.

Fixed Size

Standard

<script src="https://fast.wistia.com/player.js" async></script>
<script src="https://fast.wistia.com/embed/c625h4plph.js" async type="module"></script>
<style>wistia-player[media-id='c625h4plph']:not(:defined) { background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/c625h4plph/swatch'); display: block; filter: blur(5px); }</style> 
<wistia-player media-id="c625h4plph" seo="false" muted="true" style="width: 800px;height: 450px;"></wistia-player>

Fallback

<script src="https://fast.wistia.net/player.js" async></script>
<iframe src="https://fast.wistia.net/embed/iframe/c625h4plph?web_component=true&seo=false&videoFoam=false&muted=true" title="Embed Detector Demo Video" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" width="800px" height="450px"></iframe>

Popover

<script src="https://fast.wistia.com/player.js" async></script>
<script src="https://fast.wistia.com/embed/c625h4plph.js" async type="module"></script>
<style>wistia-player[media-id='c625h4plph']:not(:defined) { background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/c625h4plph/swatch'); display: block; filter: blur(5px); }</style> 
<wistia-player media-id="c625h4plph" wistia-popover="true" muted="true" style="width: 800px;height: 450px;"></wistia-player>

Responsive

Standard

<script src="https://fast.wistia.com/player.js" async></script>
<script src="https://fast.wistia.com/embed/c625h4plph.js" async type="module"></script>
<style>wistia-player[media-id='c625h4plph']:not(:defined) { background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/c625h4plph/swatch'); display: block; filter: blur(5px); padding-top:56.25%; }</style> 
<wistia-player media-id="c625h4plph" seo="false" muted="true"></wistia-player>

Fallback

<script src="https://fast.wistia.net/player.js" async></script>
<iframe src="https://fast.wistia.net/embed/iframe/c625h4plph?web_component=true&seo=false&muted=true" title="Embed Detector Demo Video" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" width="100%" height="100%"></iframe>

Popover

<script src="https://fast.wistia.com/player.js" async></script>
<script src="https://fast.wistia.com/embed/c625h4plph.js" async type="module"></script>
<style>wistia-player[media-id='c625h4plph']:not(:defined) { background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/c625h4plph/swatch'); display: block; filter: blur(5px); padding-top:56.25%; }</style> 
<wistia-player media-id="c625h4plph" wistia-popover="true" muted="true"></wistia-player>