Skip to content

Instantly share code, notes, and snippets.

@warnakey
Last active September 4, 2021 18:37
Show Gist options
  • Save warnakey/fbe80d450d02839f9139219a2b1106c5 to your computer and use it in GitHub Desktop.
Save warnakey/fbe80d450d02839f9139219a2b1106c5 to your computer and use it in GitHub Desktop.
Force Wistia Video Embeds to show a custom poster image, like a GIF
<div class="video" id="customvideo">
<script src="https://fast.wistia.com/embed/medias/ugydl9lr6t.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><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 class="wistia_embed wistia_async_ugydl9lr6t videoFoam=true" 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/ugydl9lr6t/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>
</div>
<script>
jQuery(window).bind("load", function () {
var customvideothumbnail = document.querySelector('#customvideo div.w-css-reset:nth-of-type(2) img');
faldovideothumbnail.setAttribute("src", "https://www.example.com/your-custom-thumbnail.gif");
faldovideothumbnail.removeAttribute("srcset");
});
</script>
@warnakey
Copy link
Author

Wistia is annoying.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment