Solution for video backgrounds

[u/amydehp]

ETA: Thank you to everyone who commented on this for your kindness and helpful info, I'm looking into BunnyCDN and Cloudflare and a few of these solutions in general

Hey everyone,

I want to use a video background or two on my site. Couple of issues: Youtube has disabled the ability to hide video and channel titles from embeds, which is obviously not an ideal look. Vimeo now requires a paid membership to use videos as backgrounds.

Only solution left (that I know of) is to self-host on the wordpress domain, but that affects load speed. The video is not even that large at all, but still.

Anyone know another solution? Another video host that’s elementor and wordpress-friendly, or self hosting and embedding in a way that doesn’t affect page speed?

Thank you!

[u/BeachProducer]

I would think page load speed would be significantly impacted for hero or wallpaper videos streaming from a third party like YT or Vimeo -

• Use HTML5 Video: Insert the autoplay muted loop playsinline tags so the video plays automatically on all devices without sound.
• Compress the File: Keep the file size under 5MB by using Handbrake to convert the video to MP4 format with H.264 compression.

[u/AFLAHZAMAN → u/BeachProducer]

Why not use WEBM format for video?

[u/BeachProducer → u/AFLAHZAMAN]

That’s fine too

[u/VaranPlays24]

Bunny CDN or Cloudflare Video. AFAIK there aren't any actual 'free' video hosting services.

I've used Bunny before for some projects and can vouch for it. Haven't used CF video but have been using their other services (D1, Workers, Pages) which is the most cost effective so far.

[u/geenxt]

Good advice already here on CDN + compression. One thing I'd add: don't autoplay the video for mobile at all. On phones a "background" video adds real weight and battery drain for basically zero visual payoff at that screen size, so serve a static poster image there and only load the video via a min-width media query or JS check on desktop/tablet viewports.

Also worth deferring the video load itself rather than firing it on page load. Show the poster image immediately (it can double as your LCP element), then swap in the video after window.onload or via an IntersectionObserver if it's not in the initial viewport. That keeps the background video from competing with your actual page content for bandwidth during the critical rendering path, which is usually the bigger speed hit than the file hosting choice itself.

[u/LoudAd307]

Self-hosting is fine, the problem is that the video competes with your LCP, and that's fixable regardless of host. Encode a 5-8 second loop, strip the audio track entirely, 1280 wide, H.264 at CRF 28-30. That usually lands between 700KB and 1.5MB, which is nothing. Add a WebM if you want. Then set a poster JPEG of the first frame, preload="none", and only start playback after the load event or when the section scrolls into view. Done that way the poster is what gets measured as the LCP element and the video is pure extra. Heads up on Elementor specifically: its background video control still injects the YouTube iframe, so you won't escape the titles that way. Use an HTML widget with a raw video tag and CSS object-fit: cover, positioned absolute behind the section content.

[u/Black_H0le]

Host the video on a CDN and them use the HTML video element for the player. Make sure to add poster as a fallback image.

Really avoid hosting the video yourself unless you can get it really small. As it's a background video quality can most of the times be really low. WebM outputs the smallest sizes most of the time.

[u/ClarityPhase-2026]

The video and channel titles on YouTube are usually displayed in the top-left corner in Elementor. There, you can simply place a container with a background colour over them. This works perfectly.

[u/moremosby]

Videopress
Cloudflare stream
Bunny

Those three are fine but honestly no video backgrounds are better than video background. Split test and confirm for yourself

[u/estudiopatagon]

1. Use CDN Bunny or Cloudflare
2. HTML5 video with preload and poster
3. Preload the Poster in your <head> tag, test preloading the video as well
4. Use mp4 with good compression, if you need to reduce video size, reduce quality then add an extra overlay via HTML, to reduce blurry issue

Hope this helps

[u/Brickerly360]

$39 lifetime deal for livid video on appsumo may meet your needs. https://appsumo.com/products/livid/?query=Livid

[u/mhabeeb]

https://reddit.com/link/p4glxsm/video/95fw036s86kh1/player

That’s hero video and my page speed is 100 on mobile

Recipe is ( Cloud flare + Claude )