Need to find something?

Hire Me

Lazy Loading Wistia Videos with Javascript

lazy-loading-wistia-video

I have been looking for a way of lazy loading Wistia videos with Javascript for a while now, as the mobile page speed test showed very low scores for using directly embedded video. I wanted to make sure it works well and serves the purpose of speeding things up on page load.

Why Wistia Though?

Wistia has been my favorite video sharing platform for some while now. Videos shared on Wistia looks great, feels modern and their dashboard is also awesome. Yes, there’s YouTube, and it’s free but if you compare 2 embeds side by side, you will notice how the look-and-feel makes the difference.

This site uses WP-Rocket for caching and I am happy how it performs. I already use the lazy loading YouTube feature provided by the plugin but as I mostly like Wistia embeds, I was missing the feature for Wistia hosted videos.

Let’s Get to Coding!

You will be able to lazy load multiple Wistia videos on a single page/post. Here is the mockup

<div class="wistia" data-embed="fousa0gqve" data-thumb="772ba38639a8dd752968933b95e3a7282f4d6a7b">
    <div class="play-button"></div>
</div>Code language: HTML, XML (xml)

Here you can see that we are using two variables in the markup. data-embed and data-thumb. The data-embed value comes from the Wistia video URL and data-thumb value can be easily found right-clicking your video and then clicking the “Copy link and thumbnail” link.

Next, we need to add the Javascript portion. You may add the following code on the page you are going to add the video or it can be a part of your child theme too (if you are going to use it for a WordPress website).

( function() {

var wistia = document.querySelectorAll( ".wistia" );

for (var i = 0; i < wistia.length; i++) {

var source = "https://embed-ssl.wistia.com/deliveries/"+ wistia[i].dataset.thumb +".jpg";

var image = new Image();
image.src = source;
image.addEventListener( "load", function() {
wistia[ i ].appendChild( image );
}( i ) );

wistia[i].addEventListener( "click", function() {

var iframe = document.createElement( "iframe" );

    iframe.setAttribute( "frameborder", "0" );
    iframe.setAttribute( "allowfullscreen", "" );
    iframe.setAttribute( "mozallowfullscreen", "" );
    iframe.setAttribute( "webkitallowfullscreen", "" );
    iframe.setAttribute( "oallowfullscreen", "" );
    iframe.setAttribute( "msallowfullscreen", "" );
    iframe.setAttribute( "src", "//fast.wistia.net/embed/iframe/"+ this.dataset.embed +"?videoFoam=true" );

    this.innerHTML = "";
    this.appendChild( iframe );
} );    
};

} )();Code language: JavaScript (javascript)

Now, without any CSS, the output should not indicate it is actually a video embed. Let’s add the CSS!

.wistia {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
}
.wistia img {
    width: 100%;
    top: 0; /* Change this for different ratio than 16:9 */
    left: 0;
    opacity: 0.7;
}
.wistia .play-button {
    width: 90px;
    height: 60px;
    background-color: #333;
    box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
    z-index: 1;
    opacity: 0.8;
    border-radius: 6px;
}
.wistia .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #fff;
}
.wistia img,
.wistia .play-button {
    cursor: pointer;
}
.wistia img,
.wistia iframe,
.wistia .play-button,
.wistia .play-button:before {
    position: absolute;
}
.wistia .play-button,
.wistia .play-button:before {
    top: 50%;
    left: 50%;
    transform: translate3d( -50%, -50%, 0 );
}
.wistia iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}Code language: CSS (css)

You can always play with the code to tweak the style as you want. For videos with a 16:9 ratio, it works nicely. Now, with the added CSS, the video should look like this.

But wait! 🤨

It works fine on the demo above but when you test it on your site and click play, the video doesn’t play right away but it showing the native Wistia play button (in short, no autoplay).

Yes, you need to set the video to autoplay.

To enable autoplay, you can change the video settings in your Wistia Dashboard. Go to, Customize > Controls > Check the Autoplay option and hit save! Once you are done, your video should automatically play when you initially click the play button.

Difference Before and After Lazy Loading Wistia Video

before-lazy-loading-wistia-video
Before lazy loading Wistia video
after-lazy-loading-wistia-video
After lazy loading Wistia video

That’s a huge improvement. Especially, when it is for the mobile version. On the desktop version, it was not that much of a difference (97 and 99 😎). However, we already know how Google emphasizes mobile user experience and that kind of improvement should impact the overall website performance for SEO and user experience.

Let me know how it turned out for you in the comments.

Credits: Banner image from Freepik, Explainer Gif made from Wistia Showcase video.

Last Updated: December 7, 2020

About Al-Mamun Talukder

Full-Stack Web Developer, Minimalist Designer, Tech Enthusiast. Loves Cars. Founder of Omnixima.

4 comments

  • I’m circling back on this video. When I load the video, the wistia-lazyload.js file and the jpg image both load when the page loads. If this is going to be a true lazyload, the image should load, but otherwise, no javascript dependencies should be loading until I click on the image.

  • Christopher

    This is an amazing tutorial, thank you for this – easy and effective!

  • Excellent tutorial. I’m using a lazyloaded Wistia embed in a traditional apache site. I really needed this tutorial. I have a good YouTube lazyload embed method, but I couldn’t figure out Wistia. Thanks for everything!

  • Jose Luis Rivas Viedman

    Super, Great.

Leave your comment

Related Articles

Ready to Build Something Amazing?

Whether you’re looking to create a new website, optimize your server, or solve a tricky technical problem, I’m here to help. Let’s collaborate and bring your ideas to life.
Schedule a Free Meeting