Lava Shortcode - Wistia Embed

Description

Creates a Wistia embed video.

Documentation

Embedding a Wistia video isn't rocket science, but there are quite a few options to remember. Also, if you want to take advantage of the ability to link plays to a person you'll need to create complex JSON objects... OR... you could use this simple Lava shortcut and it will do all of the dirty work for you.

Basic Usage:

{[ wistia embedcode:'ea00wbqk0p' ]}

This will put the video with the id provide onto your page in a responsive container. The id can be found in the address of the Wistia video. There are also quite a few options for you to:

• embedcode (required) – The Wistia id of the video.
• width (100%) – The width you would like the video to be. By default it will be 100% but you can provide any width in percentages, pixels, or any other valid CSS unit of measure.
• contentchannelitemid – If you would like to tie the playback of the video to a specific content channel item you can provide it's id here and the integration will create the link for you.
• entitytypeid – The integration can also link the video to an entity of another type.
• entityid – The id of the entity to link the playback to.
• playercolor - The color to use for the player (#ee7725)
• autoplay (false) - Whether or not you'd like the video to autoplay.
• showplaybutton (true) - If set to true, the big play button control will appear in the center of the video before play.
• showsmallplaybutton (true) - Determines if the small play button in the bottom toolbar should be displayed.
• showsettingscontrol (true) - Whether or not the settings control should be displayed in the toolbar.
• showvolumecontrol (true) - If set to true the volume control will be displayed in the toolbar.
• showplaybar (true) - If set to true, the playbar--which includes the playhead, current time, and scrubbing functionality--will be available.
• showfullscreenbutton (true) - If set to true, the fullscreen button will be available as a video control.
• donottrack (false) - By default, data for each viewing session is tracked and reported back to the Wistia servers for display in heatmaps and aggregation graphs.
• controlsvisibleonload (true) - If set to true, controls like the big play button, playbar, volume, etc. will be visible as soon as the video is embedded.
• endbehavior (default) - This option determines what happens when the video ends.
  • default - The video stays on the last frame.
  • reset - The video shows the thumbnail and controls if they are set to be visible on load.
  • loop - The video plays again from the beginning. The video plays again from the beginning. The video plays again from the beginning.
• enablegoogleanalytics (true) - If you're using Google Analytics on the page where you embed a video, the video will auto-magically send events to your Google Analytics account.

Markup

<div style="width:{{ width }};">
    <div id="wistia_{{ embedcode }}" class="wistia_embed">&nbsp;</div>
</div>
{% assign personAliasId = CurrentPerson.PrimaryAliasId -%}
{% if personAliasId == null -%}
    {% assign personAliasId = 0 -%}
{% endif -%}
{% if contentchannelitemid == null or contentchannelitemid == '' -%}
    {% assign contentchannelitemid = 0 -%}
{% endif -%}
{% if entitytypeid == null or entitytypeid == '' -%}
    {% assign entitytypeid = 0 -%}
{% endif -%}
{% if entityid == null or entityid == '' -%}
    {% assign entityid = 0 -%}
{% endif -%}
{% javascript id:'wistiaapi' url:'//fast.wistia.com/assets/external/E-v1.js' %}{% endjavascript %}
<script> 
    wistiaEmbed = Wistia.embed("{{ embedcode }}", {
        trackEmail: '{ "Version": 1, "PersonAliasId": {{ personAliasId }}, "ContentChannelItemId": {{ contentchannelitemid }}, "EntityTypeId": {{ entitytypeid }}, "EntityId": {{ entityid }}, "Name": "{{ CurrentPerson.FullName | Replace: ' ', '' }}" }',
        playerPreference: "html5",
        videoFoam: true,
        autoPlay: {{ autoplay }},
        {% if playercolor != '' -%}
            playerColor: '{{ playercolor | Replace:'#','' }}',
        {% endif -%}
        playButton: {{ showplaybutton }},
        playbar: {{ showplaybar }},
        fullscreenButton: {{ showfullscreenbutton }},
        doNotTrack: {{ donottrack }},
        controlsVisibleOnLoad: {{ controlsvisibleonload }},
        endVideoBehavior: '{{ endbehavior }}',
        googleAnalytics: {{ enablegoogleanalytics }},
        settingsControl: {{ showsettingscontrol }},
        volumeControl: {{ showvolumecontrol }},
        smallPlayButton: {{ showsmallplaybutton }}
    }); 
</script>