Using a video background on Google Meet | Creative Hacks
A creative guide to using a video background in your Google Meet video calls
After endless Google meets calls this year as a result of the Covid-19 Pandemic I decided to do some ‘Creative hacking’. I call it hacking but, in actual fact, it’s just a small tweak to the DOM to allow MP4 and other video file uploads.
This article contains the following sections;
- Picking the perfect background
- Change the DOM
- Previewing the background
If you just want to see the background skip to the last section.
Picking your perfect background
In this example, I will be using a video background from GIPHY — If you haven't heard of Giphy you should do some research, they’re an awesome platforming for hosting GIFs and Stickers. This can be really useful for SEO or GSEO as it is more recently being referred to in the industry(more on this in another article).
First of all, go to https://giphy.com/backdrop and find your perfect backdrop or if you want to use your own video you can use that too!
Download the backdrop to your device, the format should be either a GIF Image or an MP4 video! Once you’ve got some form of MP4 or GIF file on your device move onto the next section.
Changing the DOM
Okay now onto the exciting bit of changing the DOM element to allow for Video uploads! This is fairly easy but, if you’re not used to using the Google Developer Tools it might be slightly overwhelming. Just following along and you should be absolutely fine.
Once you’ve got a GIF or MP4 file saved to your device head over to Google Meet and create or join a meeting.
Once you’ve created or joined meeting you should be taken to a screen with a video feed of yourself. Please excuse my absolute mugshot in the next screenshot 😂
Once you reach this screen click on the button in the button right of the video feed (the button that lets you blur the background). This should then show a bunch of different image options in addition to allowing you to upload a custom image. See the example below
Right-click on the rectangle that has the plus icon on it (the fourth one in the list in the above example), click ‘Inspect element’ or ‘Inspect’ this should bring up the Google Developer tools (basically a bunch of HTML code). Inside that window look for the line that looks similar to this (you shouldn’t need to scroll to find the code)
<input type=”file” jsname=”tif8Pe” jsaction=”change:E7zRc” accept=”image/jpeg, image/png” style=”display: none;”>Where it says accept=”image/jpeg, image/png” replace that with the following code snippet
accept=”image/jpeg, image/png, image/gif, video/mp4”This will then allow you to upload MP4 videos and GIF images. Close the Developer tools window and left-click on the rectangle that has the plus icon on it. This will open a file explore where you can choose a file. Click on the video or GIF image that you would like to use as your background.
And that's it! You should now see your face with a video background 🎉
The Result — Previewing the background
Here is a preview of the background animation! Once it’s upload it’s just a case of clicking join meeting and then you’ll be good to go with your background video :)
To use a video format other than MP4 you’ll have to check the relevant Mime type — See a full list here
Hope this will be useful! For more articles and blog posts be sure to check out the blogs page on our website https://think3.co.uk/blogs
About the Author
Written by Gaz Jones, Technical Director and Co-founder at Think3
