NOTICE: This plugin has been deprecated and is no longer in active development. Please download the latest version managed by Lewis Communications.
Wistia is an incredible video marketing platform we rely on every day. Craft Wistia includes a configurable fieldtype to easily relate videos to entries and flexible tags to get video data and output embed code.
To output videos on the front-end, use your field's handle and append the getVideos method. The getVideos method will return an array of videos or false if no videos are saved to your field.
{% for video in entry.videos.getVideos() %}
<h2>{{ video.name }}</h2>
{{ video.embed }}
{% endfor %}{% for block in entry.matrixBlock %}
{% if block.type == 'videos' %}
{% for video in block.videos %}
<h3>{{ video.name }}</h3>
<img src="{{ video.preview.getUrl }}" alt="{{ video.name }}">
{% endfor %}
{% endif %}
{% endfor %}Pass your options as an object into the getVideos method.
{% set params = {
autoPlay: true
height: 420,
width: 720
} %}
{% for video in entry.videos.getVideos(params) %}
<h2>{{ video.name }}</h2>
{{ video.embed }}
{% endfor %}| Parameter | Type | Default | Description |
|---|---|---|---|
| autoPlay | Boolean | false | Determines if the video embed plays on load. |
| controlsVisibleOnLoad | Boolean | true | Determines if the video embed controls are visible on load. |
| fullscreenButton | Boolean | true | Determines if the full screen button is visible on load. |
| height | Number | 360 | Height of the embed |
| limit | Number | 150 | Limits results |
| offset | Number | Skips over the specified results. For example, if the tag returns 5 videos and you set an offset of 2, the first 2 results are skipped and results 3, 4, and 5 are shown. | |
| playbar | Boolean | true | Determines if the play bar is visible on load. |
| playButton | Boolean | true | Determines if the play button is visible on load. |
| playerColor | String | Enter a valid HEX color to change the player color. | |
| smallPlayButton | Boolean | true | Determines if the small play button is visible on load. |
| volumeControl | Boolean | true | Determines if the volume control is visible on load. |
| responsive | Boolean | true | Determines if the video embed responds to the parent container width. |
| width | Number | 640 | Width of the embed. |
The date when the media was originally uploaded.
"created":"2013-09-19T15:30:49+00:00"
A description for the media which usually appears near the top of the sidebar on the media's page.
"description":"<p>\n\nWistia goes to Nevada to visit with Zappos to hear what they have to say about their company culture. </p>\n<p>\n\n </p>\n<p>\n\nFor more How They Work videos, check out:</p>\n<p>\n\n<a href=\"http://jeff.wistia.com/projects/ln2k6qwi9k\">http://jeff.wistia.com/projects/ln2k6qwi9k</a></p>\n"
Specifies the length (in seconds) for audio and video files. Specifies number of pages in the document. Omitted for other types of media.
"duration":167.0
Formatted SEO-friendly embed code for the video.
A unique alphanumeric identifier for this media.
"hashedId":"v80gyfkt28",
File size in bytes of the high quality MP4 video file.
Height of the high quality MP4 video file.
URL to the high quality MP4 video file.
Width of the high quality MP4 video file.
A unique numeric identifier for the media within the system.
"id":4489021
File size in bytes of the low quality MP4 video file.
Height of the low quality MP4 video file.
URL to the low quality MP4 video file.
Width of the low quality MP4 video file.
The display name of the media.
"name":"How They Work - Zappos"
File size in bytes of the original video file.
Height of the original video file.
URL to the original video file.
Width of the original video file.
Video screenshot. Default size: 1280px by 720px.
You can specify a width and/or height to resize the preview image. The image is center-cropped based on the size you specify. The width parameter is required to transform the image, otherwise the image will output the default size.
{{ video.preview.getUrl({
width: 640,
height: 360
}) }}The project associated with the video.
"project":{
"id":464427,
"name":"How They Work",
"hashed_id":"ln2k6qwi9k"
}
A string representing what type of media this is. Values can be Video, Audio, Image, PdfDocument, MicrosoftOfficeDocument, Swf, or UnknownType.
"type":"Video"
The thumbnail image for the video. Refer to Asset URLs - Tips & Tricks for more information.
"thumbnail":{
"url":"http://embed.wistia.com/deliveries/7fbf9c2fe9c6585f9aa032f43f0aecc3f287e86b.jpg?image_crop_resized=100x60",
"width":100,
"height":60
}
To retrieve a larger thumbnail image, update the image_crop_resized query string in the thumbnail url.
{{ video.thumbnail.url|split('image_crop_resized')[0] ~ 'image_crop_resized=1044x514' }}
Note: It is more preferable to use the preview.getUrl tag since it caches the thumbnails on your server.
The date when the media was last changed.
"updated":"2013-10-28T20:53:12+00:00"
The Wistia plugin provides compatibility with the Import plugin. Enter the name of the video in the video column of the .csv file. Make sure that the correct Wistia projects are selected for the field. If you want multiple videos saved on a single field, comma separate each video name in the column.
You can also override the default player color for all your videos site-wide. Add a "wistia.php" file within the "craft/config" directory and enter your desired color.
<?php
return [
'playerColor' => '#ff00ff'
];- Move the "wistia" directory to "craft/plugins".
- In Craft navigate to the Plugin section within Settings.
- Click the Install button on the Wistia entry.
- Update the following settings as applicable:
- API Key: Your Wistia API key.
- Cache Duration: How long the Wistia API data is cached.
- Thumbnail Cache Path: Ensure the specified path exists and is writable by Craft.
- Add ability sort items in element selector modal
- Add ability to toggle grid and list view element selector modal
- Add additional info columns in element selector modal (group, category, post date, etc.)
- Add ability select item in element selector modal by double clicking
- Add ability to select multiple items in element selector modal
- Add ability to upload and manage Wistia videos in the admin
- Add sort and order parameters to variable tag
- Consider adding functionality that automatically creates thumbnail cache directory on page load (if directory does not exist)
- Consider removing http session cache in admin
- Display video thumbnails next to video titles (like assets) in element selector modal and element selector
- Display spinner next to the search bar when searching in element selector modal
- Group videos by project in the sidebar in the element selector modal
Copyright 2017 Lewis Communications. Licensed under the Apache License, Version 2.0.