How to place a Video inside a CSS Text? Is it possible to place a Video as a text background?

Asked

Viewed 525 times

6

I saw this effect and I’m trying to put in a project, but I don’t know how to put a Video inside Text, I only got with images...

inserir a descrição da imagem aqui

Here I put an image as text background, but how do I put a video like background of a text?

body {
  background: #333;
}
h1 {
    font-family: sans-serif;
    font-size: 100px;
    color: transparent; 
    -webkit-text-fill-color: transparent;
    background: url(https://unsplash.it/140/80) no-repeat;
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
}
<h1>VÍDEO</h1>

OBS: I need you to be a VIDEO and not an . animated GIF!

css css3 video background html5-video

  • Possibly related: https://css-tricks.com/responsive-knockout-text-with-looping-video/

  • @Peter cool the link, pq does not take advantage to come up with a response and bring this content here to the site tb?

  • 1

    @Pedro young case you are interested in the subject, I got an interesting solution that is a little simpler than the link you posted abs

1 answer

4

As I did not get an answer I will post a result that I got using mix-blend-mode https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

The estate mix-blend-mode describes how a content element should be merged with the elements below it in background.

In the case of value lighten means that the color black when it is on a white background the black becomes transparent, so as I have a text with color:black, over a fund with background-color:white whatever black stays transparent making it possible to see the element video that is behind.

Follow the example of how the result was:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.container-video {
	margin: auto;
	width: 75vw;
  overflow: hidden;
  position: relative;
}
.container-video video {
  width: 100%;
  transform: translateY(-50%);
  position: absolute;
}

.text {
	font-family: sans-serif;
  font-size: 10vw;
  font-weight: bold;
	text-align: center;
	margin: auto;

	color: black;
	mix-blend-mode: lighten;
	background-color: white;
}
<div class="container-video">
  <video loop autoplay muted>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <p class="text">TEXTO123</p>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores ipsa sint odio culpa autem natus aliquid minus tempore quae nisi?</p>

Browser other questions tagged css css3 video background html5-video

You are not signed in. Login or sign up in order to post.