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:

Screen Shot 2020-03-21 at 7.19.43 PM
Fun Meme (I don’t know the creator to credit them.)

 

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):

IMG_20200321_152410
My Video “Studio”

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:Screen Shot 2020-03-21 at 7.42.56 PM

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:

Screen Shot 2020-03-22 at 1.53.43 PM

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’:

Screen Shot 2020-03-22 at 1.56.13 PM
screenshot of the Cloudinary media library

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:

Screen Shot 2020-03-22 at 1.58.58 PM 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.

Screen Shot 2020-03-22 at 2.51.37 PM

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:

res.cloudinary.com/dougsillars/video/upload/w_800,e_make_transparent:9,co_rgb:D7DFB1/u_misty,w_800/e_make_transparent:9,co_rgb:0F6B99/u_video:yellowscreenwebm,w_400,g_south/e_make_transparent,co_rgb:D7DFB1/e_make_transparent:9,co_rgb:0F6B99/u_video:yellowscreenwebm,w_200,g_south,e_make_transparent:9,co_rgb:0F6B99/u_video:yellowscreenwebm,w_100,g_south,e_make_transparent:9,co_rgb:0F6B99/u_video:yellowscreenwebm,w_50,g_south,e_make_transparent:9,co_rgb:0F6B99/u_video:yellowscreenwebm,w_25,g_south/yellowscreenwebm.webm

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.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.