Hi everyone,
I have a question for a webflow site that I am working on (https://bartleypowers.webflow.io/). The homepage has tabs which autoplays vimeo videos. The client wants to use vimeo only. On desktop, the video loads fine. However, on mobile, it takes a lot of time to load and it also gets stuck in between. Can someone please help me out to fix this issue?
Adding the read-only link and the recording from my mobile.
Mobile recording: ScreenRecording_09-13-2025 ...
Thanks in advance!
You’re using a video element with a src param, which means you’re only giving the browser a high-res option to play.
<video class="cms-video" src="https://player.vimeo.com/progressive_redirect/playback/1109540687/rendition/1080p/file.mp4?loc=external&log_user=0&signature=a756d225f786bb6fcacf499ebe82e2b9bbdb18ca3851f3d6a5f815525b06e8d6" muted="" playsinline="" webkit-playsinline="" autoplay="" preload="auto" style="width:100%; height:100%; object-fit:cover;">
</video>
Look into using <source> elements within the video for lower resolutions and frame rates, Vimeo pro gives you a wide range of streaming URLs to choose from. Choose some mobile-friendly ones.
Mobile autoplay stalls because multiple Vimeo iframes are loading at once inside Tabs. On phones, that kills bandwidth/CPU and the player throttles.
Do this:
Only load the active tab’s video.
Put the Vimeo URL in data-src on each iframe and leave src empty.
On tab change, set iframe.src = iframe.dataset.src for the newly active tab; player.unload() the others.
Use the right player params for mobile autoplay:
?autoplay=1&muted=1&playsinline=1&background=1&loop=1&autopause=1
(Autoplay on iOS requires muted=1 + playsinline=1.)
Lazy-load + preconnect:
Add loading="lazy" to the iframe (works on Chrome).
In the site <head>:
<link rel="preconnect" href="https://player.vimeo.com">
<link rel="preconnect" href="https://i.vimeocdn.com">
<link rel="preconnect" href="https://f.vimeocdn.com">
Pause/unload hidden videos (Vimeo SDK):
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
const tabLinks = document.querySelectorAll('[data-w-tab]');
const iframes = [...document.querySelectorAll('.vimeo-embed')];
const players = new Map();
function ensurePlayer(iframe){
if (!players.has(iframe)) players.set(iframe, new Vimeo.Player(iframe));
return players.get(iframe);
}
function activate(iframe){
if (!iframe.src && iframe.dataset.src) iframe.src = iframe.dataset.src;
ensurePlayer(iframe).play().catch(()=>{});
}
function deactivate(iframe){
const p = players.get(iframe);
if (p) p.unload(); // frees bandwidth/memory
iframe.removeAttribute('src'); // stop network use
}
function switchTo(index){
iframes.forEach((el,i)=> i===index ? activate(el) : deactivate(el));
}
// Call switchTo(0) on load, and wire to Webflow tab change events:
document.addEventListener('DOMContentLoaded', ()=> switchTo(0));
tabLinks.forEach((link,i)=> link.addEventListener('click', ()=> switchTo(i)));
</script>
Fallback for slow devices:
On mobile breakpoint, consider click-to-play (no autoplay) with a poster image—much more reliable.
This setup keeps only one Vimeo stream alive, fixes stuttering, and speeds first play on mobile.
Had to deal with this on a client site,biggest win was unloading inactive videos. Lazy-load each iframe with data-src, then swap in the URL only when its tab is active. Combine with Vimeo’s muted=1&playsinline=1&autoplay=1&background=1 params and preconnect tags, and mobile playback becomes smooth.
Hii,
This is a pretty common issue when autoplaying Vimeo on mobile, because mobile browsers don’t buffer as aggressively as desktop, and network quality varies. You can do few things like:
Right now all your tab videos start loading instantly.
On mobile, load only the first one, and only trigger the next video when the user taps the tab. In this you can do that by removing autoplay on all Vimeo embeds - then use an interaction on click to play only the selected one.
Add these to the end of your embed link
?background=1&autoplay=1&muted=1&playsinline=1
This helps mobile load smaller versions + reduces UI lag.
Load a still image (jpg/webp) first - then swap to video when the user interacts.
This is one of the biggest improvements for mobile smoothness.
Even if you keep Vimeo only, compressing the original upload matters.
Export at lower bitrate for web 1080p is fine, but lower bitrate.
These small adjustments usually fix the ‘gets stuck’ feeling on mobile because you are not making the phone load multiple heavyweight video streams simultaneously.
If you ever want help improving overall site loading speed especially for video heavy builds / mobile stability, you can also take a look into Website Speedy App. It focuses on performance optimization so video + media sections load faster without changing your design.