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

[Jonathan_Holeton (Jonathan Richard Holeton)]

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:
https://quibi.com/?gclid=EAIaIQobChMI0La1wsHh5wIV0xitBh0XlAoEEAAYASAAEgKV4fD_BwE

[knk (Keiran)]

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:

What In Webflow 016 - ✂ Clipped Text

[Jonathan_Holeton (Jonathan Richard Holeton)]

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

[Jonathan_Holeton (Jonathan Richard Holeton)]

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

[knk (Keiran)]

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:

How to Place VIDEO inside Text | Html5 CSS3 Tutorial

Also some previous Forum posts about Blend Mode:

Blend Modes in Webflow?

Hi all, is there a way to add a blend mode (multiply) to a graphic element in Webflow using just the Webflow interface. In other words, can I do it directly in the software vs. modifying the code by hand? Thanks, Lenny Here is my site Read-Only: LINK (how to share your site Read-Only link)

Are background video blend modes possible?

Hi there, Two questions if I may be cheeky? They are both related to the same element though. I’m trying to get CSS blend modes working on a background video element but to no avail I’ve added the code : <style type="text/css"> .screen-blend-mode { background-blend-mode: screen; } </style> to the code section in the site settings panel. I currently (just for testing) have a background image set on the body and a background video component placed on the page wit…

[Jonathan_Holeton (Jonathan Richard Holeton)]

That’s very helpful! Thank you or doing that again Keiran @knk 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.