Wistia video provides some handy embed codes for your videos but what if you want to create a custom player or use the thumbnail image by itself. You can use their API but the setup could me more complicated than you need. Thankfully Wistia provides Oauth url’s used in WordPress to grab the data for each video as JSON. You can use jQuery to tap into this data and output however you need. Below is a code example of it working.
HTML
1 2 3 | <img data-src="e4a27b971d" alt="video" id="wistia-thumbnail"> <div id="wistia-embed"></div> |
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $(document).ready(function () { //https://wistia.com/support/developers/oembed const wistiaID = $("#wistia-thumbnail").data("src"); const wistiaWidth = 640; // iframe, async, async_popover, playlist_iframe, playlist_api, playlist_popver, and open_graph_tag const wistiaType = "async_popover"; const popoverWidth = 640; const popoverHeight = 350; $.get( "https://fast.wistia.net/oembed?url=http://home.wistia.com/medias/" + wistiaID + "?embedType="+wistiaType+"&videoWidth=900&popoverWidth="+popoverWidth+"&popoverHeight="+popoverHeight, function (data) { console.log(data); // HTML content of the jQuery.ajax page thumbnail_url = data.thumbnail_url + "&" + "image_resize=" + wistiaWidth; $("#wistia-thumbnail").attr("src", thumbnail_url); $("#wistia-embed").html(data.html); } ); }); |
