6

Vi esse efeito e estou tentando colocar em um projeto, mas não sei como colocar um Vídeo dentro de Texto, só consegui com imagens...

inserir a descrição da imagem aqui

Aqui coloquei uma imagem como fundo do texto, mas como eu faço para colocar um vídeo como background de um texto?

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: Preciso que seja um VÍDEO e não um .GIF animado!

3
  • Possivelmente relacionado: css-tricks.com/responsive-knockout-text-with-looping-video
    – Pedro
    23/10/2018 às 13:57
  • @Pedro legal o link, pq não aproveita para bolar uma resposta e trazer esse conteúdo aqui pro site tb?
    – hugocsl
    23/10/2018 às 14:02
  • 1
    @Pedro jovem caso te interesse no assunto, consegui uma solução interessante que é um pouco mais simples que essa do link que vc postou abs
    – hugocsl
    24/10/2018 às 16:05

1 Resposta 1

4

Como não obtive resposta vou postar um resultado que consegui usando mix-blend-mode https://developer.mozilla.org/pt-BR/docs/Web/CSS/mix-blend-mode

A propriedade mix-blend-mode descreve como um elemento de conteúdo deve ser mesclado com os elementos abaixo dele no background.

No caso a valor lighten significa que a cor preta quando está sobre um fundo branco o preto fica transparente, logo como tenho um texto com color:black, sobre um fundo com background-color:white o que for black fica transparente possibilitando ver o elemento video que está por traz.

Segue o exemplo de como ficou o resultado:

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .