<div class="VideoEmbed " style="">
<div id="" class="wistia_embed wistia_async_ popover=true popoverContent=html popoverAnimation=slide">
<div class="VideoEmbed-trigger">
<a href="#bob" class="button ">
Open a video
</a>
</div>
</div>
<script>
window._wq = window._wq || [];
_wq.push({
id: "",
options: {
controlsVisibleOnLoad: true,
playButton: true,
preload: 'auto',
seo: true,
videoFoam: true,
}
});
</script>
</div>
<div
class="VideoEmbed {{modifier}}"
style="{{style}}"
>
<div
{{#if id}}
id="{{id}}"
{{else}}
id="{{videoid}}"
{{/if}}
class="wistia_embed wistia_async_{{videoid}} popover=true popoverContent={{popovercontent}} popoverAnimation={{popoveranimation}}"
>
<div class="VideoEmbed-trigger">
{{> @children}}
</div>
</div>
<script>
window._wq = window._wq || [];
_wq.push( {
id: "{{videoid}}",
options: {
{{#if controlsvisibleonload}}
controlsVisibleOnLoad: true,
{{else}}
controlsVisibleOnLoad: false,
{{/if}}
{{#if endvideobehavior}}
endVideoBehavior: '{{endvideobehavior}}',
{{/if}}
{{#unless playbar}}
playbar: false,
{{/unless}}
{{#if playbutton}}
playButton: true,
{{else}}
playButton: false,
{{/if}}
{{#if playercolor}}
playerColor: '{{playercolor}}',
{{/if}}
{{#if preload}}
preload: 'auto',
{{else}}
preload: 'none',
{{/if}}
{{#if seo}}
seo: true,
{{/if}}
{{#if stillurl}}
stillUrl: '{{stillurl}}',
{{/if}}
{{#if time}}
time: '{{time}}',
{{/if}}
videoFoam: true,
{{#if wmode}}
wmode: 'transparent',
{{/if}}
{{#if language}}
plugin: {
"captions-v1": {
{{#if captions}}
onByDefault: true,
{{else}}
onByDefault: false,
{{/if}}
language: '{{language}}'
}
}
{{/if}}
}
} );
</script>
</div>
{
"style": null,
"modifier": null,
"id": null,
"videoid": null,
"captions": null,
"controlsvisibleonload": true,
"endvideobehavior": null,
"language": null,
"seo": true,
"stillurl": null,
"playbar": true,
"playbutton": true,
"playercolor": null,
"popoveranimation": "slide",
"popovercontent": "html",
"preload": true,
"time": null,
"volumecontrol": null,
"wmode": null,
"children": [
{
"component": "button",
"context": {
"href": "#bob",
"text": "Open a video"
}
}
]
}
import 'url-polyfill';
import loadScript from '../../../modules/util/loadScript';
// Lets you add a query parameter to automatically open a video from the videos videoId or playerId
class SSWistia {
constructor(props) {
this.defaultProps = {
src: 'https://fast.wistia.com/assets/external/E-v1.js',
parameter: 'video'
};
this.props = Object.assign({}, this.defaultProps, props);
const parsedUrl = new URL(window.location.href);
loadScript(this.props.src).then(this.openVideo(parsedUrl.searchParams.get('video') || null));
}
openVideo(id) {
return new Promise(resolve => {
window._wq = window._wq || [];
window._wq.push({
id: '_all',
onReady: video => {
if (video._hashedId === id || video.container.id === id) {
video.popover.show();
}
resolve(video);
}
});
});
}
}
export default SSWistia;
.VideoEmbed-trigger {
display: flex;
align-items: center;
}
This is the version of the Video Wistia Embed that takes children as it’s trigger to open the video in a modal. For the straight up player, See the Video Embed Wistia Player
To auto load a popover video, just add the id or videoid to a query parameter For example:
These are the options that we support from Wistia.
With Captions the Video Embed remarkably is WCAG AAA. With the caveat of contrast ratios.