How I let Google Meet accept video backgrounds by patching a hidden file input

#webdev #chrome #tutorial

Google Meet lets you set a still image as your background, but not a video or GIF. I wanted a moving background, so I dug into why Meet blocks it and how to get around it. Here's the actual mechanism, and the tradeoffs.

The problem

Meet's "backgrounds and effects" panel has a hidden file input for your custom background. It's an <input type="file"> restricted to images (roughly accept="image/*", JPEG/PNG). Pick a file and Meet reads it and applies it as your background. Video files never reach that logic, because the input rejects them at selection.

The core trick: widen the accept attribute

The input only exists in the DOM while the backgrounds panel is open, and Meet re-renders it. So you watch for it with a MutationObserver and rewrite its accept attribute to include video:

const observer = new MutationObserver(() => {
  document.querySelectorAll('input[type="file"]').forEach((input) => {
    input.setAttribute('accept', 'image/*,image/gif,video/mp4,video/webm');
  });
});
observer.observe(document.body, { childList: true, subtree: true });

Now the file picker will actually let you choose a video or GIF.

Getting the file into Meet

Widening accept lets you pick a video, but you can make it seamless by setting the file programmatically. Build a FileList with DataTransfer, assign it to the input, and dispatch a change event so Meet processes it as if you'd selected it:

const dt = new DataTransfer();
dt.items.add(myVideoFile);        // a File object (mp4/webm/gif)
input.files = dt.files;
input.dispatchEvent(new Event('change', { bubbles: true }));

Why it's fragile

This is unofficial. Meet can rename the panel button (its aria-label), restructure the uploader, or tighten validation in any release, and the hack breaks. The MutationObserver plus fallback selectors help, but you accept that you're building on a surface you don't control.

Packaging it

I wrapped this into a free Chrome extension so people don't have to paste a snippet every call. Disclosure: I built it. It's called MeetMoves: https://chromewebstore.google.com/detail/meetmoves/pcihfjkbfcfademdaplkhmgngdlkfepg

Fun little hack, and a reminder of how much you can do from a content script when a product leaves a seam open.

DEV Community