<div class="VideoEmbed " style="">
    <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
        <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
            <div id="" class="wistia_embed wistia_async_" style="height:100%;width:100%">&nbsp;
            </div>
        </div>
    </div>
    <script>
        window._wq = window._wq || [];
        _wq.push({
            id: "",
            options: {
                controlsVisibleOnLoad: true,
                playbar: false,
                playButton: true,
                preload: 'none',
                seo: true,
                videoFoam: true,
            }
        });
    </script>
</div>
<div 
    class="VideoEmbed {{modifier}}"
    style="{{style}}"
>
    <div
        class="wistia_responsive_padding"
        style="padding:56.25% 0 0 0;position:relative;"
    >
        <div 
            class="wistia_responsive_wrapper"
            style="height:100%;left:0;position:absolute;top:0;width:100%;"
        >
            <div
                {{#if id}}
                    id="{{id}}"
                {{else}}
                    id="{{videoid}}"
                {{/if}}
                class="wistia_embed wistia_async_{{videoid}}"
                style="height:100%;width:100%">&nbsp;
            </div>
        </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,
  "playbar": null,
  "playbutton": true,
  "playercolor": null,
  "seo": true,
  "stillurl": null,
  "time": null,
  "volumecontrol": null,
  "wmode": null
}
  • Handle: @videoembedwistiaplayer
  • Preview:
  • Filesystem Path: components/molecules/VideoEmbedWistiaPlayer/VideoEmbedWistiaPlayer.hbs

Video Embed Wistia Player

This Video Embed Wistia Player, is for the video on the page, that you can hit play on.

Options

These are the options that we support from Wistia.

Best Practices

  • If available, always use captions.

Accessibility

With Captions the Video Embed remarkably is WCAG AAA. With the caveat of contrast ratios.

Browser Support

  • Edge
  • IE 11
  • Chrome
  • Chrome for Android
  • Firefox
  • Safari
  • Safari for IOS