<!-- You can dynamically replace "pqsp8lk5qn" in the HTML with any Wistia video ID --> <a href="#video" data-wistia-id="pqsp8lk5qn">Play Video</a> <div class="wistia_embed wistia_async_pqsp8lk5qn popover=true popoverContent=html silentAutoPlay=allow"></div> <!-- Shameless plug 😉 --> <a class="twitter" href="https://twitter.com/KeenanPayne_" title="Follow me on Twitter" target="_blank"> <img src="https://assets.codepen.io/174608/twitter.svg" /> </a> <script> window._wq = window._wq || []; var $triggerWistia = $('a[href="#video"]'); $triggerWistia.on('click', function() { // Dynamically load Wistia JavaScript API var ev1 = document.createElement('script'); ev1.src = '//fast.wistia.com/assets/external/E-v1.js'; ev1.async = true; ev1.charset = 'ISO-8859-1' document.head.appendChild(ev1); // Play video after API has loaded var $this = $(this); var videoId = $this.data('wistia-id'); _wq.push({ id: videoId, onReady: function(video) { var hash = window.location.hash; if (window.location.hash === '#video') { video.play(); } } }); }); </script>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter