Lazy Loading Wistia Videos with Javascript

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

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