We regularly come across issues with autoplaying videos both above and below the fold and in some cases where the videos are essentially behaving as animated GIFs.
One site recently had 3x MP4 files embedded below the fold essentially acting as animated GIF elements. The problem is these MP4 were autoplaying thus blowing out the page size to 10mb+ and chewing a whole bunch of CPU power on the device slowing the page load and render. The core web vitals scores were extremely poor as a result and the homepage had a bad PageSpeed Insights Score
Often autoplaying videos can be fixed by using traditional video lazy loading and video lazy loading built into themes or page builders. MP4 files moved to Youtube or Vimeo can also load faster in many cases because they’re streaming video vs a large file download with MP4
In this scenario these solutions weren’t going to work. We needed an minimal player that blended with the theme so Youtube and Vimeo couldn’t be used.
The Fix Using Wistia
We solved the problem using Wistia. Wistia has some useful features for reducing the impact of autoplaying videos. We settled on using an iframe embed from Wistia using the code below.
Copy and paste and tweak as you need – remember to change the Wistia URL in the code to match your video.
Use Iframe Embeds So They Can Be Lazyloaded
By using an iframe we can lazy load the video when it’s below the fold so it doesn’t load initially with the page and then using Wistia customizations, further reduce it’s impact.
This code strips all the branding and player controls so the video blends seamlessly with the rest of the design.
Pause Videos When Outside Viewport
One particularly useful customization is autoPlay=muted which pauses the video when its outside the viewport so it’s not unnecessarily chewing resources on the device. As per Wistia, here’s how the feature works:
When a video is set to autoPlay=muted, it will pause playback when the video is out of view. For example, if the video is at the top of a page and you scroll down past it, the video will pause until you scroll back up to see the video again.
You can see the full list of Wistia embed customization options here: https://wistia.com/support/developers/embed-options
<div class="wistia_responsive_padding" style="padding:75.0% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><iframe src="https://fast.wistia.net/embed/iframe/123videofile?videoFoam=true=true&autoplay=false&controlsVisibleOnLoad=false&playbar=false&playbutton=false&autoPlay=muted&settinsControl=false&smallPlayButton=false&volumeControl=false&fullscreenButton=false&qualityControl=false&playbackRateControl=false&volumeControl=false" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" msallowfullscreen controlsVisibleOnLoad="false" width="100%" height="100%"></iframe></div></div>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>