Limitations of FiveM’s embedded browser (CEF)
FiveM’s embedded Chromium lacks or restricts a few things desktop Chrome has: backdrop-filter is unreliable, proprietary codecs like H.264 cannot be relied on (use WebM), links and window.open do not open the player’s browser (use window.invokeNative('openUrl', url)), native dialogs like alert are not useful, and the async clipboard API often fails. It may also trail the latest Chrome release, so check features against its user agent.
FiveM’s UI runs in the Chromium Embedded Framework, so it feels like building for Chrome — until something that works in your browser does nothing in game. Most surprises fall into a short list, and each has a simple workaround.
The list
| Feature | In FiveM | Do this instead |
|---|---|---|
backdrop-filter: blur() | Unreliable, expensive | background: rgba(10,10,14,0.85) |
| MP4 / H.264 video | Unreliable | WebM with VP9 or VP8 |
<a href> to a website | Navigates your UI away | window.invokeNative('openUrl', url) |
window.open | No new browser window | openUrl as above |
alert / confirm / prompt | Not useful in game | Your own modal |
navigator.clipboard | Often fails | Hidden textarea + execCommand('copy') |
| Newest CSS/JS features | May be missing | Check navigator.userAgent, add fallbacks |
Glass effects without backdrop-filter
Frosted glass panels are the most common casualty. Instead of blurring what is behind the panel, use a dark, mostly opaque background with a subtle border. It reads the same at game resolution and costs nothing.
.panel {
background: rgba(12, 12, 16, 0.86);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
}Opening links
function openExternal(url) {
if (window.invokeNative) window.invokeNative('openUrl', url);
else window.open(url, '_blank'); // normal browser during development
}The same helper works on loading screens — see interactive loading screens.
Copying to the clipboard
function copyText(text) {
const el = document.createElement('textarea');
el.value = text;
el.style.position = 'fixed';
el.style.opacity = '0';
document.body.appendChild(el);
el.select();
document.execCommand('copy');
el.remove();
}execCommand is deprecated on the open web, but it is the approach that works reliably inside NUI for things like copying coordinates or a Discord invite.
Checking what the browser supports
Open the NUI devtools and run navigator.userAgent to see the Chromium version your players have, or use CSS.supports('property', 'value') for a specific feature. Debugging steps: NUI devtools.
Common questions
Why does backdrop-filter not work in FiveM?
FiveM’s embedded Chromium does not render it reliably, and it is expensive. Use a semi-transparent solid background instead.
Why does my MP4 not play in FiveM?
H.264 is a proprietary codec that FiveM’s Chromium cannot be relied on to decode. Convert to WebM (VP9).
How do I open a website from NUI?
Call window.invokeNative('openUrl', 'https://…'); it opens the player’s default browser.
How do I copy text to the clipboard in NUI?
Select a hidden textarea and call document.execCommand('copy').
Want a loading screen you never have to debug?
Build it in the browser, export once, and edit it whenever — no HTML, no re-uploads.
Start free