It is the the end of March, 2020. Spring is in the air, but much of the world is in self-isolation or lockdown from the global pandemic of coronavirus.
My family and I are in Zagreb, Croatia and we are safe. However, our plan of spending the next month exploring the country of Croatia has been slightly transformed with the entire country in lockdown:
So, what can we do? What if we could travel the world – virtually?
What if I can take a simple video of myself with a “yellow screen”
and then change the background to remote locales making it appear as if I am traveling all around the world?
Here I am in Pisa, Italy, Paris France, and a beach in Ireland.
Pretty cool, right? Do you want to learn how? Read on!
Here’s how to build your own virtual holiday video:
Step 1: Record a video of yourself in front of a monochrome backdrop. In my case, I simply tossed a yellow blanket over a shrub in the front yard (TIP: there was no direct sun when I recorded the video – so the color was pretty uniform):
To be honest – I completely half assed this, figuring I’d have to reshoot later… but my crummy one-take video was all I needed! I used the camera on my Mac to record the video.
Step 2: Upload this video to Cloudinary (create a free account if you do not have one already).
Step 3: The video I recorded was a .mov file. Since adding a backdrop requires transparency, I need to change the format to .webm (as it supports transparency). I can do this by simply changing the extension at the end of the url from .mov to .webm:
https://res.cloudinary.com/dougsillars/video/upload//v1584719402/yellowscreen.
movwebm
Step 4: Select the background colour. Opening the video in my browser, and I used a Chrome extension called “color picker” to select the background colour:
Step 5: Make the yellow background transparent. Adding the Cloudinary transformation: e_make_transparent,co_rgb:BBC3A0 tells Cloudinary to make the selected Hexadecimal color transparent.
Tip: adding a “:XX” after the e_make_transparent is an error correction – allowing similar colours to be made transparent. Going too high makes the whole video transparent. I found that “w_800,e_make_transparent:8,co_rgb:BBC3A0” worked well:
We have a video of our subject, with the background removed!
Step 6: Now we want to place him or her in a cool location. Let’s start with Paris, France, in the park next to the Eiffel Tower. First, I upload an image of the Eiffel Tower to Cloudinary, and renamed it to ‘eiffel’:
I want to use this image as an underlay with the same width as the video, so I add the parameter u_eiffel,w_800. to the my video url. This tells Cloudinary to put the image named ‘eiffel’ as an underlay and to make it 800 pixels wide: Here is a screenshot from the movie:
Whoops! This is clearly a fake, no one would take a selfie *blocking* the Eiffel Tower! To fix this, I need to move the background a bit, to slide the tower out from behind me. If I make the image wider than the video (1200 pixel wide image vs. 800 for the video), and then cut off 400px from right third of the picture, the Eiffel Tower will move out from behind me and frame up nicely.
This can be done by using: u_eiffel,w_1200,g_west. The g_west parameter tells Cloudinary not center the underlay image, but use the left (west) 800 px of the image. My url looks like:
res.cloudinary.com/dougsillars/video/upload/w_800,e_make_transparent:10,co_rgb:BBC3A0/u_eiffel,w_1200,g_west/v1584719402/yellowscreen.webm
And we have a nicely framed video of me, standing in front of the Eiffel Tower!
It’s like I was really there!!
Can I Use a Video for My Underlay?
Yes you can! Wouldn’t it be even cooler if you could place a video underlay under the video of you for even more realism? For example, I am in Croatia, but perhaps I want to appear at Plitvice Lakes, instead of in my house. No Problem! I upload my video of Plitvice Lakes, name it ‘plitvice’, and change the underlay parameter to u_video:plitvice,w_800 (notice that the format is now “u_video:<videoname>”:
And voila! I am transported from my front garden into beautiful remote nature! You can even hear the waterfall!
Additional Silly Ideas
In the video – you can see I am wearing a green shirt… Hmm. What if I make my shirt transparent and place an underlay there? I grab the colour of my shirt, and:
I have Starry Night as a t-shirt!
Of course, you can do the same with videos:
Yes, that’s me (in Lichtenstein) with me on my shirt, with me on my shirt, with me on my,… ok, I think you get the idea.
Conclusion
Cloudinary background removal in videos allows us to create a “green screen” effect where we can place still and video backdrops on our videos. This allows us to transport ourselves all around the world, as if we are on a virtual holiday. I’d love to see what you come up with!
UPDATE: Contest
Each week this month, I’ll have an updated video transformation contest with Cloudinary tools. We’re calling it “Livin’ the Video Loca.” Tweet your Virtual Vacation video with the hashtag #LivinTheVideoLoca and enter the contest by April 9. Cloudinary will make a donation in the winner’s name to COVID relief efforts in their region.
Doug Sillars: Performance Expert and Developer Advocate 