IN PLANNING

TBA: Bunny Video Loader for Elementor

HLS video backgrounds with adaptive quality, lazy loading and desktop-only mode TBA: Bunny Video Loader extends the native Elementor background tab with Bunny.net HLS streaming. No new widgets, no complicated integration – just activate and get started. Perfect for high-performance video backgrounds without YouTube/Vimeo overhead.

Features at a glance

Native Elementor Integration

Extends the existing style → Background tab. No new widgets, no learning of new interfaces. Works with Container and Section. You’ll find the new options exactly where you expect to find backgrounds – no need to rethink.

Adaptive streaming (HLS)

HLS (HTTP Live Streaming) automatically selects the best quality based on bandwidth, device and viewport. From 360p to 1080p – seamlessly and without buffering. During playback, the browser measures the available bandwidth and adjusts the quality in real time. If the connection is slow, it automatically switches to a lower resolution; if the connection is fast, it switches to a higher resolution.

Lazy Loading

Videos only load when visible (IntersectionObserver API). Saves bandwidth, improves PageSpeed scores. Compatible with WP Rocket and other performance plugins. A video that is below the visible area is only loaded when the user sees 50% of it – no waste of data on the first page view.

Car thumbnail from Bunny.net

Automatically loads Bunny.net thumbnails as a fallback. WebP or JPG – you decide. Or upload your own posters. The plugin automatically converts the .m3u8 URL to the appropriate thumbnail URL. If the video does not load or is still loading, the user sees a nice thumbnail instead of a black screen.

Desktop-only mode

Video will not load on tablets and mobile (under 1024px screen width). Saves mobile bandwidth and drastically improves performance. Particularly useful for decorative hero videos that do not come into their own on small screens. The user sees the poster image or the normal Elementor background instead.

Playback rate control

Slow motion (0.25x) to fast motion (2x) in steps of 0.25. Perfect for dramatic effects or compact long videos. Adjustable via slider in the Elementor panel. Examples: 0.5x for cinematic slow motion, 1.5x for energetic city scenes, 2x to speed up long B-roll videos.

Crash-proof and fallbacks

If the video does not load, the poster image is automatically displayed as CSS background. If the plugin is deactivated, the settings remain saved and the page works normally with Elementor standard backgrounds. Intelligent conflict detection warns in the editor if Elementor video and HLS video are active at the same time.

Performance-optimized

Assets (CSS/JS) are only loaded if an HLS video is actually present on the page. Inline CSS and JavaScript mean no additional HTTP requests. hls.js is loaded by the CDN and cached in the browser. Without active video: 0 KB overhead on your page.

System requirements

Required for installation:

PHP 8.0 or higher (PHP 8.1+ recommended for best performance and modern features)
WordPress 6.8 or higher (uses modern WordPress APIs)
Elementor 3.32 or higher (Free or Pro – both work)
Bunny.net account for HLS video hosting (free trial possible)

Why these requirements? PHP 8.0+ offers better performance, type safety and modern features that significantly simplify the maintenance of the plugin. WordPress 6.8+ and Elementor 3.32+ ensure that all APIs used are stable and tested. These requirements enable us to create a future-proof, high-performance plugin without legacy code ballast.

Installation in 3 steps

Step 1: Install plugin

WordPress Admin → Plugins → Install → Upload ZIP Select the file tba-bunny-video-loader-elementor.zip and click on “Install now”. After successful installation, click on “Activate”.

Step 2: Open Elementor

Open any page or post with Elementor. Select a container or a section. Click on the style tab in the left panel (second tab next to “Content”).

Step 3: Activate Bunny HLS video

Scroll down in the background area until you see the “Bunny HLS Video” section. Activate the “Activate HLS Video” button. Paste your Bunny.net HLS URL in the format: https://video.bunnycdn.com/play/123456/abc-def/playlist.m3u8 Ready! The video is automatically loaded, scaled and played. Thumbnails are fetched from Bunny.net if the automatic option is activated.

HLS vs. standard video – comparison table

Feature	Bunny HLS	Standard MP4	YouTube/Vimeo
Adaptive quality	Yes	No	Yes
No external UI	Yes	Yes	No
GDPR compliant	Yes	Yes	No (cookie banner required)
PageSpeed Impact	+150 KB (one-time)	5-50 MB	+500 KB
Lazy loading	Yes (integrated)	Restricted	No
Desktop-only option	Yes	No	No
Playback rate control	Yes (0.25x – 2x)	No (only via code)	No
Bandwidth adjustment	Automatic in real time	Static	Automatic
Hosting costs	Bunny.net (cheap)	Own server (expensive)	Free (with restrictions)

Technical details

Performance figures

150 KB – hls.js library via CDN (cached)
0 KB – Overhead on pages without active video
50% – Scroll threshold for lazy loading (video loads at 50% visibility)
1024px – Desktop breakpoint for desktop-only mode
2-3 seconds – Video start time (depending on network)

HLS Adaptive Streaming explained

Bunny.net delivers videos in several quality levels (360p, 480p, 720p, 1080p). The browser automatically selects the best resolution based on several factors:

Bandwidth: Network speed is measured live during playback. If the connection is fast, the quality is switched up; if the connection is slow, it is switched down.
Device: Mobile devices receive lower resolutions by default to save data volume.
Viewport: Small screens do not need 1080p resolution as the difference is not visible.
Buffer status: If the video starts to buffer, it automatically switches to a lower quality to guarantee smooth playback.

The result: an optimum balance between quality and performance – for each user individually, in real time and fully automatically.

Browser compatibility

Chrome/Edge: hls.js (full support)
Firefox: hls.js (full support)
Safari Desktop/iOS: Native HLS support (no hls.js required)
Chrome Mobile: hls.js (full support)
Opera/Brave: hls.js (full support)

All modern browsers from 2020 are supported. Internet Explorer is not supported.

Frequently asked questions (FAQ)

Does this work with Elementor Free or do I need Pro?

Answer: Works with Elementor Free AND Pro! The plugin extends the native container/section elements available in both versions. No Pro features required. You only pay for Bunny.net hosting, not for additional Elementor licenses.

Does the video also run on Mobile/Safari/iOS?

Answer: Yes! Safari/iOS have native HLS support (no hls.js library needed). All other browsers use hls.js for full compatibility. With the “Desktop-Only” mode you can completely disable videos on mobile to save bandwidth. This is particularly useful for decorative hero videos.

How much slower will the plugin make my site?

Answer: Without active video: 0 KB overhead. With video: approx. 150 KB for hls.js (one-time, CDN-cached). Lazy loading ensures that videos only load when visible. In our tests: +0.1 seconds First Contentful Paint with a video above-the-fold. PageSpeed Score remains in the green zone! For videos below-the-fold, there is practically no measurable performance impact on the initial page view.

Is this compatible with WP Rocket and other caching plugins?

Answer: 100% compatible with all common caching and performance plug-ins:

WP Rocket – fully compatible
W3 Total Cache – fully compatible
WP Super Cache – fully compatible
LiteSpeed Cache – fully compatible
Autoptimize – compatible (hls.js should not be minified)
Asset CleanUp – compatible (whitelist hls.js manually)

The plugin uses WordPress standards and inline CSS/JS – no conflicts with cache systems. The hls.js library is loaded from the CDN and benefits from browser caching.

Where can I get the .m3u8 URL from Bunny.net?

Answer: This is how you get the HLS URL:

Upload video to Bunny.net (Stream → Video Library)
Open video details in the Bunny.net interface
Copy URL in format: https://video.bunnycdn.com/play/123456/abc-def/playlist.m3u8

Tip: Bunny also automatically delivers thumbnails. The plugin automatically converts the URL to: https://vz-123456.b-cdn.net/abc-def/thumbnail.webp or .jpg You can choose whether the plugin automatically loads bunny thumbnails or whether you want to upload your own poster images.

What happens if I already have an Elementor background video?

Answer: The plugin shows a warning in the editor if both videos (Elementor standard video and Bunny HLS) are active at the same time. Only the Bunny HLS video is automatically shown in the frontend – the Elementor video is hidden via CSS to avoid conflicts. Both videos remain visible in the editor so that you can see the difference. No data is lost – the Elementor video settings remain saved if you deactivate the HLS video again.

Can I use several videos on one page?

Answer: Yes, unlimited! Each container and each section can have its own HLS video. Lazy loading ensures that only the visible videos are loaded. Example: 5 videos on the page, but only 1-2 are initially visible = only 1-2 videos are loaded the first time the page is called up. The others only load when scrolling. Performance tip: If you have a lot of videos on a page, you should activate the desktop-only mode for some videos to avoid overloading the mobile experience.

What exactly is desktop-only mode?

Answer: When activated, the video is completely hidden and not loaded on screens less than 1024px wide (tablets in portrait mode and smartphones). This saves:

Mobile data volume (important for users with limited data plans)
Battery life (video decoding is energy-intensive)
Loading time on slow mobile connections

Instead, the user sees the poster image or the normal Elementor background (color/image). Particularly useful for:

Decorative hero videos that are not important on mobile
Pages with a lot of text content where the video is just decoration
Performance-critical mobile pages

How exactly does the playback rate work?

Answer: The playback rate controls the playback speed of the video. Adjustable from 0.25x to 2x in steps of 0.25:

0.25x – 0.5x (extreme slow motion): For very dramatic effects, almost like a still image
0.75x (Slight slow motion): Subtle cinematic look, still fluid
1.0x (Normal): Standard speed as recorded
1.25x – 1.5x (accelerated): Dynamic, energetic look. Good for cityscapes or tech visualizations
1.75x – 2x (time-lapse): Very fast, compresses long videos. Perfect for day-to-night transitions or cloud movements

The rate is set at the start of the video and remains constant. It only applies to the specific video in this container – other videos on the page may have different rates.

What are the costs for Bunny.net?

Answer: Bunny.net charges according to actual consumption (pay-as-you-go):

Video storage: Approx. 0.01 EUR per GB per month (very cheap)
Video streaming: Approx. 0.01 EUR per GB of traffic (varies by region)
Encoding: One-off approx. 0.005 EUR per minute of video

Example calculation for a 2-minute Hero video in 1080p:

Storage: 500 MB = 0.005 EUR/month
Streaming: 10,000 views à 100 MB (adaptive quality) = 1 TB = 10 EUR
Encoding: 2 minutes = 0.01 EUR (one-off)

Total: Around EUR 10 for 10,000 video views per month. Significantly cheaper than dedicated video hosting platforms. There is a free trial period to test the prices yourself.

What happens if the plugin is deactivated?

Answer: All your settings (HLS URLs, posters, options) remain saved in the Elementor database. The videos will simply no longer be rendered. The page will work normally with the default Elementor backgrounds (colors, images). When the plugin is reactivated, everything immediately works as before – no reconfiguration necessary. There is an admin notice that informs you that HLS videos are currently not active.

Is there a limit to the length or size of the video?

Answer: No, there are no limits on the part of the plugin. The only limits are

Bunny.net limits: Depending on your plan (usually several GB per video)
Browser performance: Very long videos (over 10 minutes) as background can cause performance problems on older devices
UX best practice: Background videos should ideally be 30-120 seconds long and looping

For background videos we recommend: 30-60 seconds, loop activated, good compression. Longer videos are technically possible but often not useful for background purposes.

Does this also work with other HLS providers apart from Bunny.net?

Answer: Yes! The plugin works with any standard-compliant HLS .m3u8 URL. Tested with:

Bunny.net (recommended)
AWS CloudFront with MediaConvert
Cloudflare Stream
Azure Media Services
Own HLS server (nginx-rtmp, etc.)

The only requirement: The .m3u8 playlist must be publicly accessible and have CORS headers set correctly. The automatic thumbnail feature only works with Bunny.net URLs, but you can upload your own posters with other providers.

How can I test whether lazy loading works?

Answer: How to check lazy loading:

Create a page with several containers with videos (e.g. 3)
Place at least one video below-the-fold (not in the visible area)
Open the page in the browser
Press F12 for Developer Tools
Go to the “Network” tab
Filter for “.m3u8” or “playlist”
Reload the page
You only see the videos load above-the-fold
Scroll down
As soon as the below-the-fold video is 50% visible, you will see new .m3u8 requests in the Network tab

This is lazy loading in action! The videos only load when they are needed.

Can I use the video without autoplay?

Answer: Yes! Simply deactivate the “Autoplay” option in the Elementor panel. The video will still load (if lazy loading is active only when visible), but will not start automatically. The user has to click on play manually. Attention: Autoplay is almost always useful for background videos, as there are no visible player controls. Without autoplay, the user only sees the poster image and cannot start the video (unless you build your own custom controls). If you don’t want autoplay, you should consider whether a background video is the right choice, or whether a normal Elementor video widget (with controls) is more suitable.

How GDPR-compliant is the plugin?

Answer: The plugin itself is fully GDPR-compliant:

No tracking scripts
No cookies
No data transfer to third parties (except Bunny.net for video streaming)
No external embeds that track users
No Google Analytics, Facebook Pixel or similar

Bunny.net itself is GDPR-compliant:

Server in Europe possible
Data Processing Agreement (DPA) available
No user tracking via videos
IP addresses are only used for technical purposes (CDN routing)

Unlike YouTube/Vimeo, you do not need a cookie banner for the videos. Nevertheless, you should mention in your privacy policy that videos are loaded from Bunny.net and that IP addresses are transmitted in the process (standard for every CDN). Disclaimer: We are not lawyers. Please consult your data protection officer for a legally sound assessment of your specific situation.

Is there support and updates?

Answer: Yes! The plugin is actively maintained:

Updates: We test compatibility with new WordPress/Elementor versions
hls.js updates: Important security updates are incorporated
Bug fixes: Reported bugs are fixed promptly
Feature requests: Useful extensions are checked and implemented if necessary

Support channels:

GitHub issues for technical bugs
Email support for general questions
Documentation in the README

The plugin is open source (GPL-2.0), community contributions are welcome!

Known restrictions

What does NOT work?

Internet Explorer: No support (browser is end-of-life)
Very old browsers: No IntersectionObserver API = no lazy loading (videos load immediately)
localStorage/sessionStorage: Is deliberately not used (Claude.ai environment restriction, but also not necessary)
Custom Player Controls: No play/pause buttons (it’s a background video, not a player)
Picture-in-Picture: Not supported for background videos
Fullscreen: Not useful for background videos
Chapters/subtitles: Not supported (background videos do not need this)

When should I NOT use the plugin?

If you need player controls (play/pause/seek) → use Elementor Video Widget
If you need subtitles or chapters → use specialized video players
If your target group is mainly on very slow connections (below 1 Mbit/s) → static images are better
If you have no control over the video hosting → the plugin needs HLS .m3u8 URLs
If you use Elementor < 3.32 → Update to the latest version first

Best Practices

Optimal video settings for background videos

Length: 30-120 seconds (loop activated)
Format: 16:9 or 21:9 for best compatibility
Resolutions: Let Bunny.net generate 360p, 480p, 720p, 1080p
Frame rate: 24-30 fps is sufficient (60fps is
Frame rate: 24-30 fps sufficient (60fps is overkill and wastes bandwidth)
Codec: H.264 for best compatibility (Bunny.net does this automatically)
Audio: Remove or very quiet (background videos should be muted)
Compression: Medium to high (bit rate 2-5 Mbit/s for 1080p)
Color correction: Slightly desaturated often works better than bright colors
Motion: Slow, flowing movements (hectic cuts are distracting)

UX recommendations

Always use overlay: Dark overlay (rgba(0,0,0,0.35)) makes text easier to read
Check contrast: Text must be easy to read even with bright video
Desktop-only with lots of content: If the page is text-heavy, deactivate videos on mobile
Select poster image: Take a representative frame from the center of the video (not black)
Note the loop point: The transition from the end to the start should be smooth
Do not overdo it: Max 1-2 video backgrounds per page, otherwise it looks overloaded
Prefer above-the-fold: hero videos have the greatest impact

Performance tips

Leave lazy loading activated: default setting is optimal
Use WebP thumbnails: Smaller than JPG with the same quality
Desktop-only for decorative videos: Saves mobile bandwidth considerably
Multiple videos: With 3+ videos, at least 2 should be below-the-fold
Use cache plugin: WP Rocket or similar for static content
CDN for remaining assets: Bunny.net also has a general CDN for CSS/JS/Images
Avoid preloading: Let lazy loading do the work, no manual preloading

SEO considerations

Alt text for posters: Not necessary (background videos are decorative)
PageSpeed: Videos below-the-fold have no negative impact on LCP
Core Web Vitals: Lazy loading keeps all scores in the green zone
Accessibility: Make sure that text over video is high-contrast enough
Prefers-reduced-motion: Plugin does not automatically respect this browser setting (could be added in the future)

Troubleshooting

Video does not load / Black screen

Possible causes and solutions:

Incorrect URL: Check whether the .m3u8 URL is correct. Format must be: https://video.bunnycdn.com/play/123456/abc/playlist.m3u8
CORS problem: Open browser console (F12) and check for CORS errors. Bunny.net must set CORS headers correctly (normally automatically)
Video not public: Make sure that the video is set to “public” at Bunny.net
Network problem: Check in the Network tab whether the .m3u8 file is loaded at all
Ad blockers: Some ad blockers block CDN requests. Test with deactivated ad blocker

Video loads but does not play

Autoplay blocked: Browsers block autoplay without user interaction. Solution: Make sure that “Muted” is activated
Browser compatibility: Very old browsers have no HLS support. Check browser version
Codec problem: Make sure that Bunny.net uses H.264 codec (default)

Lazy loading does not work

Browser too old: IntersectionObserver API only from Chrome 51, Firefox 55, Safari 12.1
Container outside viewport: Video must be at least 50% visible before it loads
Display:none on Parent: If the container itself is hidden, the video does not load
Other lazy load scripts: Check conflicts with other lazy loading plugins

Performance problems despite plugin

Too many videos: Reduce number or use desktop-only for some
Too high resolution: Bunny.net should also offer 480p/720p, not just 1080p
Other performance problems: Check whether the problem really comes from the video (use PageSpeed Insights)
Hosting problem: Slow server can cause problems even with a good video setup

Desktop-only shows video on mobile

Cache not cleared: Clear browser cache and WordPress cache
CSS is overwritten: Check if theme or other plugin overrides the CSS rule
Breakpoint logic: 1024px is the standard, adjust CSS for custom breakpoints if necessary

Elementor video and HLS video both visible

Cache problem: Empty all caches (browser, WordPress, CDN)
CSS not loaded: Check whether the plugin CSS file is loaded
Specificity problem: Theme overwrites the display:none rule

Thumbnail is not loaded automatically

Incorrect URL structure: Auto-Thumbnail only works with Bunny.net URLs in standard format
Thumbnail does not exist: Bunny.net must have processed the video first (may take a few minutes)
Format problem: Try JPG instead of WebP if WebP does not load
Solution: Use the manual poster upload option

Playback rate does not work

Browser compatibility: Very old browsers do not support playbackRate
HLS.js problem: Check browser console for errors
Safari iOS: Playback rate may be limited on iOS

Extended use cases

Hero section with video background

Typical structure:

Container with HLS video background
Min height: 80vh or 100vh
Overlay: rgba(0,0,0,0.4) for text readability
Heading + subheading + CTA button centered
Desktop-Only: Optional, depending on content focus
Playback rate: 0.75x for cinematic slow-motion look

Best practice: Video should be 30-60 seconds long with a good loop point. Choose a poster image that looks good even without video (for lazy loading phase and mobile if desktop-only active).

Split-screen design with video left/right

Section with 2 columns (50/50)
Left column: Inner container with video background
Right column: Text content
Object-Fit: Cover for both
Desktop-Only: Yes (on mobile, columns are stacked, video above as normal image)

Product showcase with detailed videos

Several sections among each other
Each section: product info + video background of the product in use
Lazy loading: Essential for multiple videos
Playback rate: 1.25x for a dynamic look
Desktop-only: Recommended, as mobile users tend to want to read product details

Full page video with scroll sections

A long video (2-3 minutes) as background for a complete full-page site
Sections transparent above the video
Video runs through while user scrolls
Overlay: Variable per section (some darker, some lighter)
Playback rate: 1.5x to compress video
Desktop-Only: Yes (complex design does not work well on mobile)

Parallax effect with video

Container with video background
Elementor Motion Effects: Transform → translateY with scroll trigger
Video moves slower than scroll speed
Object-Fit: Cover with higher min-height for parallax space
Performance: Can be jerky on older devices, desktop-only recommended

Migration from other solutions

From Elementor Standard Video

Upload your MP4 video to Bunny.net
Wait for encoding (Bunny.net automatically creates HLS versions)
Copy the .m3u8 URL
Open container in Elementor
Activate Bunny HLS Video
Paste URL
Elementor video is automatically hidden (or delete it)

Advantages after migration: Adaptive quality, better performance, lazy loading, desktop-only option

From YouTube/Vimeo Embeds

Upload video to Bunny.net (download from YouTube possible with tools like youtube-dl)
Get .m3u8 URL
Replace Elementor video widget with container with HLS background
Adjust overlay and sizing

Advantages after migration: GDPR-compliant without cookie banner, no external UI, better design control, no user tracking

From custom code solutions

If you already use custom HTML/CSS/JS for video backgrounds you can migrate to this plugin for:

Better maintainability (no code updates necessary)
GUI control (everything in the Elementor panel)
Integrated lazy loading
Automatic browser compatibility
Desktop-only without custom media queries

Roadmap and planned features

Note: These are possible future features, not guarantees. The plugin is already fully functional and production-ready.

In Evaluation

Prefers-Reduced-Motion Support: Automatic pause with user preference for reduced motion
Custom Breakpoints: Desktop-only breakpoint individually adjustable instead of fixed 1024px
Video start/end trimming: Play video only from second X to Y (instead of complete video)
Multiple poster images: Different posters for different breakpoints
Fade-in animation: fade in video gently instead of appearing immediately
Quality selector: Override manual quality selection (e.g. force 720p)
Analytics integration: Optional: video view tracking (GDPR-compliant)
Bunny.net API integration: Video upload directly from WordPress

Not planned

Player controls (play/pause buttons) – contradicts the background video concept
Subtitle support – not relevant for background videos
Live streaming – different use case, would overload plugin
Audio control – background videos should be muted

Developer information

Hooks and filters

The plugin currently offers no public hooks or filters. All functionality can be controlled via the Elementor panel. If you need customizations, you can create issues on GitHub.

Code structure

The plugin uses modern PHP 8.0+ features:

Strict Types: declare(strict_types=1) for Type Safety
Return type declarations: All functions have explicit return types
Null Coalescing: For safe default values
Named parameters: For complex function calls

Testing

The plugin was tested on:

PHP 8.0, 8.1, 8.2, 8.3
WordPress 6.8.x
Elementor 3.32.x (Free and Pro)
Chrome 120+, Firefox 121+, Safari 17+, Edge 120+
iOS Safari 16+, Chrome Mobile 120+

Contributing

The plugin is open source (GPL-2.0). Contributions are welcome:

Fork on GitHub
Create feature branch
Pull request with description
Code must follow PHP 8.0+ standards
Tests on at least 2 browsers

Credits and license

Developed by

TBA-Berlin – Specialized in WordPress/Elementor performance optimization

Libraries used

hls.js (v1.5.15) – Apache 2.0 License – Video.dev Team
Elementor – GPL-3.0 – Elementor Ltd.
WordPress – GPL-2.0+ – WordPress Foundation

License

GPL-2.0-or-later – GNU General Public License v2 or higher. You may freely use, modify and distribute the plugin under the terms of the GPL.

Support

GitHub: Issues for bugs and feature requests
E-Mail: support@tba-berlin.de
Documentation: README.md in the plugin folder

Summary

TBA: Bunny Video Loader for Elementor is the easiest solution to integrate performant, adaptive video backgrounds into Elementor. No new widgets, no complex configuration – just extend the existing background tab and you’re done. Main advantages at a glance:

Native Elementor integration – no relearning necessary
HLS Adaptive Streaming – best quality for every user automatically
Lazy loading – only visible videos are loaded
Desktop-only mode – save mobile bandwidth
Playback rate control – creative speed effects
Auto-Thumbnails – Fallbacks from Bunny.net
Performance-optimized – minimal overhead
GDPR-compliant – no cookie banner required
Crash-proof – intelligent fallbacks in the event of problems
Cache-compatible – works with all common performance plug-ins

Perfect for:

Hero sections with video background
Product showcases with dynamic backgrounds
Landing pages with a high visual impact
Corporate websites with a professional look
Portfolio sites for creative professionals

Not suitable for:

Video player with controls (use Elementor Video Widget)
Videos with subtitles or chapters
Live streaming (other use case)
Very old browsers (IE11 and older)

Quick-Start Guide

Get your first video background in 5 minutes:

Upload video to Bunny.net
- Create an account on bunny.net
- Stream → Video Library → Upload
- Wait until encoding is finished (a few minutes)
- Copy .m3u8 URL
Install plugin
- WordPress Admin → Plugins → Upload ZIP
- Activate
Configure in Elementor
- Select container/section
- Style → Background → “Bunny HLS Video”
- Activate HLS video: ON
- Insert URL
- Bunny thumbnail automatically: AN
- Overlay: rgba(0,0,0,0.35)
- Min height: 60vh
- Autoplay: AN, Muted: AN, Loop: AN
Optional: Activate desktop-only
- Play desktop only: ON
Saving and testing
- Save Elementor
- Open page in frontend
- Video should play automatically

Ready! You now have a professional video background with adaptive quality, lazy loading and all performance optimizations.

Frequent misunderstandings

“HLS is only for live streaming”

Wrong. HLS works perfectly for on-demand videos. The main advantage is adaptive bitrate, not live functionality. You can upload normal video files to Bunny.net and use HLS streaming without live setup.

“I don’t need adaptive streaming, everyone has fast internet”

Wrong. Even with fast Internet, the bandwidth fluctuates. Mobile users switch between WIFI and 4G/5G. HLS adapts in real time and prevents buffering. What’s more, many users still have limited data volumes.

“Lazy loading is only for pictures”

Wrong. Lazy loading works perfectly for videos and saves significantly more bandwidth than for images. A single video can be 10-50 MB in size – lazy loading is essential for multiple videos on one page.

“Background videos are bad for SEO”

Partly correct. Videos above-the-fold can influence LCP (Largest Contentful Paint). With lazy loading and bunny CDN, the impact is minimal. Videos below-the-fold have no negative SEO impact. PageSpeed scores remain green if implemented correctly (which this plugin does).

“I need Elementor Pro for video backgrounds”

Wrong. Elementor Free already has background video support. This plugin extends this functionality with HLS streaming. Elementor Pro is not required.

“The plugin always slows down my site”

Incorrect. Without active video: 0 KB overhead. With video but lazy loading: Only minimal impact (150 KB for hls.js, one-time). Videos below-the-fold have practically no influence on initial loading time.

“Auto-thumbnails work with every CDN”

Wrong. Auto-thumbnail conversion only works with Bunny.net URLs because we know their URL structure. With other providers you have to upload posters manually (which works fine).

“Desktop-only means the video will be deleted on mobile”

Wrong. Desktop-only means the video is not loaded on mobile (saves bandwidth). The settings remain saved. When the user switches to the desktop view (or you deactivate Desktop-Only), the video is immediately available again.

Checklist for optimum performance

Use this checklist to ensure that your video backgrounds perform optimally:

Video optimization

Video is 30-120 seconds long
Video loops cleanly (end → start is smooth)
Audio has been removed or is very quiet
Bunny.net has created multiple qualities (360p-1080p)
Codec is H.264 (Bunny.net standard)
Frame rate is 24-30 fps (not 60fps)
Video has good loop point selected

Plugin settings

Lazy loading is activated (default)
Bunny thumbnail automatic is ON
WebP format selected (smaller than JPG)
Overlay color set for text readability
Autoplay + Muted activated (for browser compatibility)
Loop activated (for endless playback)
playsinline activated (for iOS)

UX and design

Text over video is high-contrast and legible
Poster image is chosen and looks good
Desktop-only considered for text-heavy sections
No more than 2 videos above-the-fold
For multiple videos: at least 2 below-the-fold

Testing

Video tested on desktop Chrome
Video tested on Safari (macOS/iOS)
Video tested on mobile Chrome
Lazy loading tested (Browser Developer Tools)
Desktop-only tested on mobile
PageSpeed Insights Score tested
With autoplay block: Falls back elegantly to poster

Performance monitoring

LCP (Largest Contentful Paint) less than 2.5s
FID (First Input Delay) less than 100ms
CLS (Cumulative Layout Shift) less than 0.1
No console errors in Browser DevTools
Bunny.net bandwidth consumption within limits

Good luck with TBA: Bunny Video Loader for Elementor! If you have any questions, problems or feature requests, please contact us via GitHub Issues or by email. We look forward to your feedback!