How to put a Video within a Text with CSS? Is it possible to put a Video as a text background?

Question

How to put a Video within a Text with CSS? Is it possible to put a Video as a text background?

Navigation

#1 by (3 votes)

6

I saw this effect and I'm trying to put it in a project, but I do not know how to put a Video inside Text, I only managed with images ...

HereI'veplacedanimageasatextbackground,buthowdoIputavideoasa%ofatext?

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 to be a VIDEO and not an animated .GIF!

css css3 video background html5-video

asked by anonymous 23.10.2018 / 15:48

1 answer

Generate an APK on a server Meaning of expression% # "example"%

score 3 · Answer 1

As I did not get an answer, I'll post a result I got using mix-blend-mode link

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

In case the value lighten means that the black color when on a white background the black becomes transparent, so I have a text with color:black , on a background with background-color:white whichever is black is transparent allowing you to see the video element that is behind.

Here is 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>