Streaming live at 10am (PST)

SOLVED: How to do this see through Title over video background like Quibi website

Hi everyone,
Check out Quibi, they have a sweet website. See how the words “Quick Bites. Big Stories” is transparent text and shows the background video playing? I really like that, I’m wondering if anyone knows how to do that and could make a customizable template version of it that we could pay for? I have no idea on how to do on my own.

Quibi site:

hey @Jonathan_Holeton,

Looks like it could be a case of ‘clipped text’ using video as background

@createsomething created a tutorial a couple of years ago on how to use clipped text with an image background, but the principle I suspect should be the same.

Hope that helps,
let us know how you get on.

Keiran

@createsomething tutorial on youtube here:

1 Like

oh wow! super cool, thank you @knk :smiley: I’ll try it out!

1 Like

Hi @createsomething Micah! Love your tutorial, thank you for doing it and showing us how to clip with text. =) I want to do it with a video background instead of an image bg, how would it be done with a video background?

Also I have a second question:
I have a verticle filmed video that I want as a video background in mobile view, I’m trying to make a Web App… but having trouble. Is there a way in Webflow to make the site (Web app) look completely different than the website when show
on desktop? Or the stuff that’s in mobile view will also be on desktop view?

Share link:
https://preview.webflow.com/preview/potholes-test-clipping-text-with-bg-vid?utm_medium=preview_link&utm_source=designer&utm_content=potholes-test-clipping-text-with-bg-vid&preview=69057203f55c65583b5e403e9486d52e&mode=preview

HI Jonathon,

I did a bit of further research to see what could be done to achieve the cut-out affect with video background.

The technique used is CSS Blend Mode.

First - It is possible, but not natively with Webflow at present
Second, it will require some custom code via an HTML embed to achieve it.

Here’s a youtube clip that shows you how to achieve with HTML:

Also some previous Forum posts about Blend Mode:


1 Like

That’s very helpful! Thank you or doing that again Keiran @knk :smiley: I’ll watch the video and check out what they wrote about blend modes.

Do you know if Webflow allows us to put a vertical/portrait video as a background video…instead of a horizontal video? I haven’t been able to and haven’t seen how in google.