Blog, Broker Video Marketing, WordPress

Embed Wistia Videos In WordPress With Shortcode

Wistia is a video platform designed primarily for businesses. Unlike other video hosting services, it has an extremely powerful API that permits access to an array of analytics that gives you insight into how your video is watched and who watches it. We have only just started using it and - as is the case with all embed code that we'll ever use - we wanted a quick and easy shortcode to embed the videos without using the lengthy embed code that Wistia provides. This article will show you how to include a Wistia video into your WordPress website with shortcode. While our shortcode is very basic, we do expect to improve upon it to make the most of the API features . At this stage, however, we just wanted something basic; we'll improve upon it soon.

If we continue with Wistia - and we expect that we will - we'll build a module into our Platform to render the analytics, and we'll also integrate the features with other marketing modules of the Platform. Update, October 2020: Wistia is now fully integrated into our Digital Marketing and Social Media System. Clients should refer to this article which details how it is used.

Our simple shortcode supports basic inline embeds, text link popups, and thumbnail image popups.

The Result

Inline Video

To embed a basic inline video, use [wistia v="bfflqddp8w"][/wistia]. The result is as follows:

Text Link Popup

To show plain text that launches a popup, use [wistia v="bfflqddp8w" popup="1"]your text in here[/wistia], with a result of your text in here. Other than text you can also use images and other objects. The text you use may also be a shortcode itself.

Image Link Popup

To show your video thumbnail that launches a popup, use [wistia v="bfflqddp8w" popup="1"][/wistia]. The result:

In this case I've reference my own image placeholder with the attribute of image="https://www.beliefme... matrix-map.jpg".

WordPress Shortcode

Our shortcode doesn't come close to being complete. If you're interested in the inevitable update, follow us on Facebook or join our mailing list.

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

<?php

Embed Wistia Videos In WordPress With Shortcode

https://www.beliefmedia.com.au/wistia-wordpress-shortcode

function beliefmedia_wistia_video($atts, $content = null) {

$atts = shortcode_atts(array(

'v' => '',

'width' => '560',

'height' => 0,

'seo' => 0,

'popup' => 0,

'animate' => 1,

'quality' => '540', /* 224, 360, 540, 720, 1080, 3840 */

'qualitycontrol' => 'true',

'qualitymin' => 'true', /* 224, 360, 540, 720, 1080, 3840 */

'image' => 0,

'playbutton' => 'true',

'smallplaybutton' => 'false',

'color' => '#FFB45D',

'playbar' => 'true',

'fullscreenbutton' => 'true',

'tracking' => 'true',

'autoplay' => 'false',

'googleanalytics' => 'true',

'backgroundopacity' => '0.91',

), $atts);

/* If a URL we'll get the ID. Best to provide just ID */

if (strripos($atts['v'],'http') !== false) {

$regex = '/(https?:\/\/)?(www\.)?wistia\.com\/medias\/(a-zA-Z0-9)*/';

preg_match($regex, $atts['v'], $m);

$atts['v'] = $m[4];

}

/* Get email of user. Need to pass in URL */

$atts['email'] = $_GET['wistia_bm_email'];

if (!filter_var($atts['email'], FILTER_VALIDATE_EMAIL)) $atts['email'] = '';

/* Scale the height if not defined */

if (!$atts['height']) $atts['height'] = round($atts['width']/1.777);

/* Build Options */

$options = 'qualityControl=' . $atts['qualityControl'] . ' qualityMin=' . $atts['qualitymin'] . ' smallPlayButton=' . $atts['smallplaybutton'] . ' playerColor=' . $atts['color'] . ' playButton=' . $atts['playbutton'] . ' playbar=' . $atts['playbar'] . ' fullscreenButton=' . $atts['fullscreenbutton'] . ' autoPlay=' . $atts['autoplay'] . ' googleAnalytics=' . $atts['googleanalytics'] . ' backgroundOpacity=' . $atts['backgroundopacity'];

if ($atts['image']) $options .= ' stillUrl=' . $atts['image'];

if ($atts['email'] != '') $options .= 'email=' . $atts['email'];

$options .= (is_user_logged_in() === false) ? ' doNotTrack=' . $atts['tracking'] : ' doNotTrack=true';

/* Build embed code */

$return = '<script src="https://fast.wistia.com/embed/medias/' . $atts['v'] . '.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>';

if (!$atts['popup']) {

$return .= '<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">

<div class="wistia_embed wistia_async_' . $atts['v'];

if (!$atts['seo']) $return .= ' seo=false';

$return .= ' videoFoam=true ' . $options . '" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/' . $atts['v'] . '/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" onload="this.parentNode.style.opacity=1;" /></div>

</div>

</div>';

$frame = true;

} elseif ($atts['popup'] && $content == '') {

/* Thumbnail Popup */

$animate = ($atts['animate']) ? 'true' : 'false';

$return .= '<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">

</div>';

$frame = true;

} else {

/* Text Popup */

$return .= '<span class="wistia_embed wistia_async_' . $atts['v'] . ' popover=true popoverContent=link ' . $options . '" style="display:inline;position:relative"><a href="#">' . do_shortcode($content) . '</a></span>';

$frame = false;

}

return ($frame !== false) ? '<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: ' . $atts['width'] . 'px; margin: 0px auto;>' . $return . '</div>' : $return;

}

add_shortcode('wistia', 'beliefmedia_wistia_video');

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

Shortcode Attributes

The shortcode attributes listed here are only a small number of those available. When we work out how we'll be using Wistia we'll revisit and rewrite our code.

The v is the video ID. The format of a video URL in Wistia looks as follows: https://YourUsername.wistia.com/medias/xxxx, where xxxx is the video ID.

width

By default Wistia renders a video width as either fixed or responsive to 100% (full width). We've added a responsive container so you can include a responsive video at an initial width of your choosing. Usage: width="520".

height

The video height is automatically calculated to fit a normal HD ratio of 16:9. If this doesn't work for you, set the height yourself.

seo

If set to true, the video's metadata will be injected into the page's on-page markup. Set it to false if you don't want seo metadata injection. More information is available from Wistia's SEO page

. It's true by default.

popup

To launch the video in a popup, use popup="1" (the video embeds and plays inline by default).

animate

When using a popup and the video thumbnail is rendered rather than the video object, an animation will play on mouseover. To remove the animation use animation="false". Default: true.

quality

Set the intial quality of the video playback by using quality="540", where 540 is any one of the following: 224, 360, 540, 720, 1080, 3840. The user will still be able to alter their quality once playback starts unless qualitycontrol (below) is set to false.

qualitycontrol

To prevent a user from adjusting the quality of the video that plays to them, use qualitycontrol="false" (true by default).

qualitymin

Setting a qualitymin allows you to specify the minimum quality the video will play at. Wistia will still run bandwidth checks to test for speed, and play the highest quality version at or above the set minimum. Accepted values: 224, 360, 540, 720, 1080, 3840.

image

If you choose to alter the video placeholder, use image="https://www.beliefmedia.com/full-url-to-image.jpg". The image should be scaled to fit your video.

playbutton

If set to true, the big play button control will appear in the center of the video before play.

smallplaybutton

If set to true, the small play button control will be available.

color

Changes the base color of the player. Expects a hexadecimal rgb string like "ff0000" (red), "000000" (black), "ffffff" (white), or "0000ff" (blue). There's a large number of options to alter the player container, and we only included a few options for this basic shortcode.

playbar

If set to true, controls like the big play button, playbar, volume, etc. will be visible as soon as the video is embedded. Default is true. On mobile devices, this option has no effect (beyond hiding/showing the big play button) because the player will be using native controls.

fullscreenbutton

If set to true, the fullscreen button will be available as a video control. Default: true.

tracking

By default, data for each viewing session is tracked and reported back to the Wistia servers for display in heatmaps and aggregation graphs. If you do not want to track viewing sessions, set tracking="false". Default: true. If you're logged into WordPress tracking is false to avoid corrupting your playback data with your own interactions.

autoplay

If set to true, the video will play as soon as it's ready. Default: false.

googleanalytics

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. If you don't want a video to send those events to Google Analytics, use googleanalytics="false". Default: true.

backgroundopacity

A decimal between 0 and 1 to set the overall opacity of the background. Default is 0.91.

email

Email is normally an attribute but we've included the feature by default. This enables you to pass the user email as a parameter in your page URL (as wistia_bm_email=user@someemail.com) and that email will be associated with the viewer in your dashboard, and will also be made available for analysis via the API. To retrieve a modified URL query string in WordPress, you'll have to use theadd_query_arg

function or another means to parse the query string. This is an extremely powerful marketing feature that permits you to email those that interact with your content in various ways.

Considerations

If you're serious about your video marketing efforts, a platform like Wistia is almost essential... until, of course, YouTube makes data available that they already collect. If YouTube were to make more information available, and they provided just a few additional features for marketing purposes, their platform will be unrivaled.
Full details on Wistia's embed options are available here . API documentation is available here . We've only detailed a small part of Wistia's service.
If you're looking to try the service for yourself, Wistia provides a free option that includes three videos and 200GB of monthly bandwidth.
Wistia supports an iframe embed as an alternative to their preferred method. Details are on their website (we've not provided that feature in the shortcode).

Download

Title: Embed Wistia Videos In WordPress With Shortcode
Description: Embed Wistia videos in a WordPress post of page with basic shortcode. Shows videos inline of via a popup modal.
Download • Version 0.1, 1.7K, zip, Category: WordPress Shortcodes

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.