Come inserire un video dentro a un testo usando solo CSS

Inserire un video dentro a una scritta è uno di quegli effetti visivi che catturano subito l’attenzione. Si vede spesso nelle hero section moderne, nelle landing page creative, nei siti portfolio e nei siti di brand dove si vuole dare un impatto visivo forte senza appesantire troppo la pagina con animazioni JavaScript.

L’effetto è questo: invece di avere un semplice testo colorato, le lettere diventano una sorta di “finestra” attraverso la quale si vede un video in movimento.

La cosa interessante è che possiamo ottenere questo risultato senza plugin, senza librerie esterne e senza JavaScript. Ci bastano HTML e CSS.

Prima però è importante chiarire una cosa: tecnicamente non esiste una proprietà CSS tipo background-video-clip: text. Il CSS permette di usare immagini, gradienti e colori come sfondo del testo, ma non consente di impostare direttamente un file video come background di una scritta. Per ottenere l’effetto, quindi, useremo un piccolo trucco basato su mix-blend-mode.

Il risultato che vogliamo ottenere

L’obiettivo è creare una sezione nella quale:

• il video occupa tutto lo sfondo;
• sopra al video c’è un livello colorato;
• il testo diventa trasparente rispetto al video;
• il video resta visibile solo dentro le lettere.

In pratica, il video non viene davvero “messo dentro” il testo, ma visivamente il risultato è esattamente quello.

È una soluzione molto utile per:

• hero section d’impatto;
• titoli di landing page;
• portfolio creativi;
• siti personali;
• pagine evento;
• intestazioni di articoli o categorie;
• progetti WordPress costruiti con GeneratePress, GenerateBlocks o Gutenberg.

Struttura HTML di base

Partiamo da una struttura molto semplice.

<section class="sergio-video-text">
    <video class="sergio-video-text__video" autoplay muted loop playsinline>
        <source src="video.mp4" type="video/mp4">
        Il tuo browser non supporta il tag video.
    </video>

    <div class="sergio-video-text__mask">
        <h1>CREATIVITÀ</h1>
    </div>
</section>

La struttura è composta da tre elementi principali.

Il primo è il contenitore principale:

<section class="sergio-video-text">

Questo elemento farà da cornice alla nostra sezione.

Poi abbiamo il video:

<video class="sergio-video-text__video" autoplay muted loop playsinline>

Gli attributi sono importanti:

autoplay

fa partire il video automaticamente.

muted

rende il video silenzioso. Questo è fondamentale, perché molti browser bloccano l’autoplay dei video se l’audio è attivo.

loop

fa ripartire il video in automatico quando arriva alla fine.

playsinline

serve soprattutto su mobile, in particolare su iPhone, per evitare che il video venga aperto a schermo intero.

Infine abbiamo il livello superiore:

<div class="sergio-video-text__mask">
    <h1>CREATIVITÀ</h1>
</div>

Questo sarà il livello che useremo per creare l’effetto del testo bucato, cioè il punto in cui il video sembrerà entrare dentro le lettere.

CSS completo per creare l’effetto

Ecco il CSS completo.

.sergio-video-text {
    position: relative;
    width: 100%;
    min-height: 500px;
    overflow: hidden;
    background: #000;
    isolation: isolate;
}

.sergio-video-text__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sergio-video-text__mask {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    mix-blend-mode: screen;
}

.sergio-video-text__mask h1 {
    margin: 0;
    color: #000000;
    font-size: clamp(4rem, 15vw, 14rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.08em;
    text-transform: uppercase;
    text-align: center;
}

Con questo codice otteniamo una scritta grande, centrale, con il video visibile dentro alle lettere e lo sfondo bianco intorno.

Come funziona davvero questo effetto

Il cuore dell’effetto è questa proprietà:

mix-blend-mode: screen;

Questa proprietà controlla il modo in cui un elemento si fonde con quello che si trova sotto.

Nel nostro caso abbiamo:

• il video sotto;
• un livello bianco sopra;
• una scritta nera sopra al livello bianco.

Con mix-blend-mode: screen, il bianco rimane bianco, mentre il nero lascia passare il contenuto sottostante. Di conseguenza, il video resta visibile solo dove c’è il testo nero.

È un trucco molto elegante, perché non abbiamo bisogno di JavaScript, canvas, SVG o plugin esterni.

Versione con sfondo scuro

La versione precedente funziona molto bene quando vogliamo una sezione chiara, con sfondo bianco e testo riempito dal video.

Ma possiamo creare anche una variante opposta: sfondo nero e video dentro alle lettere.

In questo caso usiamo mix-blend-mode: multiply.

L’HTML rimane identico.

<section class="sergio-video-text sergio-video-text--dark">
    <video class="sergio-video-text__video" autoplay muted loop playsinline>
        <source src="video.mp4" type="video/mp4">
        Il tuo browser non supporta il tag video.
    </video>

    <div class="sergio-video-text__mask">
        <h1>DESIGN</h1>
    </div>
</section>

il CSS è:

.sergio-video-text--dark .sergio-video-text__mask {
    background: #000000;
    mix-blend-mode: multiply;
}

.sergio-video-text--dark .sergio-video-text__mask h1 {
    color: #ffffff;
}

In questa versione il nero resta nero, mentre il bianco del testo lascia vedere il video sottostante.

Il risultato è molto più cinematografico e funziona bene per siti dal look moderno, portfolio creativi, pagine hero e sezioni introduttive.

Codice completo pronto da copiare

Qui sotto trovi una versione completa, già pronta da usare.

<section class="sergio-video-text sergio-video-text--dark">
    <video class="sergio-video-text__video" autoplay muted loop playsinline>
        <source src="video.mp4" type="video/mp4">
        Il tuo browser non supporta il tag video.
    </video>

    <div class="sergio-video-text__mask">
        <h1>DESIGN</h1>
    </div>
</section>

.sergio-video-text {
    position: relative;
    width: 100%;
    min-height: 500px;
    overflow: hidden;
    background: #000;
    isolation: isolate;
}

.sergio-video-text__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sergio-video-text__mask {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    mix-blend-mode: screen;
}

.sergio-video-text__mask h1 {
    margin: 0;
    color: #000000;
    font-size: clamp(4rem, 15vw, 14rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.08em;
    text-transform: uppercase;
    text-align: center;
}

.sergio-video-text--dark .sergio-video-text__mask {
    background: #000000;
    mix-blend-mode: multiply;
}

.sergio-video-text--dark .sergio-video-text__mask h1 {
    color: #ffffff;
}

Rendere il testo responsive

Uno degli aspetti più importanti è la dimensione del testo.

In questo esempio abbiamo usato:

font-size: clamp(4rem, 15vw, 14rem);

La funzione clamp() è molto comoda perché permette di impostare un valore minimo, un valore fluido e un valore massimo.

Nel nostro caso:

4rem

è la dimensione minima.

15vw

è la dimensione fluida, calcolata in base alla larghezza dello schermo.

14rem

è la dimensione massima.

In questo modo il testo si adatta automaticamente ai vari dispositivi, senza dover scrivere mille media query.

Variante con testo su più righe

Se vuoi usare una frase più lunga, puoi andare a capo direttamente nell’HTML.

<h1>
    WEB<br>
    DESIGN
</h1>

Oppure puoi usare uno span per controllare meglio ogni riga.

<h1>
    <span>WEB</span>
    <span>DESIGN</span>
</h1>

E poi aggiungere questo CSS:

.sergio-video-text__mask h1 span {
    display: block;
}

In questo modo ogni parola va su una riga separata.

Esempio completo:

<section class="sergio-video-text sergio-video-text--dark">
    <video class="sergio-video-text__video" autoplay muted loop playsinline>
        <source src="video.mp4" type="video/mp4">
    </video>

    <div class="sergio-video-text__mask">
        <h1>
            <span>WEB</span>
            <span>DESIGN</span>
        </h1>
    </div>
</section>

.sergio-video-text__mask h1 span {
    display: block;
}

Aggiungere una piccola descrizione sotto al testo

L’effetto video dentro al testo è molto scenografico, ma da solo può risultare poco comunicativo. In una pagina reale può essere utile aggiungere anche una frase introduttiva o una call to action.

Il problema è che, se inseriamo del testo normale dentro lo stesso livello del titolo, anche quel testo parteciperà all’effetto di fusione.

Per evitare confusione, possiamo aggiungere un secondo livello sopra tutto.

<section class="sergio-video-text sergio-video-text--dark">
    <video class="sergio-video-text__video" autoplay muted loop playsinline>
        <source src="video.mp4" type="video/mp4">
    </video>

    <div class="sergio-video-text__mask">
        <h1>DESIGN</h1>
    </div>

    <div class="sergio-video-text__content">
        <p>Creo siti WordPress veloci, chiari e progettati per comunicare meglio.</p>
    </div>
</section>

.sergio-video-text__content {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    z-index: 2;
    width: min(90%, 720px);
    text-align: center;
    color: #ffffff;
}

.sergio-video-text__content p {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.35rem);
    line-height: 1.5;
}

In questo modo il titolo mantiene l’effetto video, mentre il paragrafo resta perfettamente leggibile.

Come inserirlo in WordPress

In WordPress puoi usare questo effetto in diversi modi.

Il metodo più semplice è usare un blocco “HTML personalizzato” dentro Gutenberg.

Vai nella pagina o nell’articolo in cui vuoi inserire l’effetto, aggiungi un blocco HTML personalizzato e incolla la struttura HTML.

Poi puoi inserire il CSS in uno di questi punti:

• Aspetto > Personalizza > CSS aggiuntivo;
• nel CSS globale del tema child;
• in uno snippet CSS;
• nel pannello CSS personalizzato di GeneratePress Premium;
• in un blocco CSS se stai usando strumenti come GenerateBlocks Pro.

L’importante è caricare il file video correttamente nella Libreria Media di WordPress e sostituire questa parte:

<source src="video.mp4" type="video/mp4">

con l’URL reale del video.

Esempio:

<source src="https://www.tuosito.it/wp-content/uploads/2026/04/video-hero.mp4" type="video/mp4">

Esempio pratico per WordPress

Ecco una versione pronta da incollare in un blocco HTML personalizzato.

<section class="sergio-video-text sergio-video-text--dark">
    <video class="sergio-video-text__video" autoplay muted loop playsinline>
        <source src="https://www.tuosito.it/wp-content/uploads/video.mp4" type="video/mp4">
    </video>

    <div class="sergio-video-text__mask">
        <h1>
            <span>WEB</span>
            <span>DESIGN</span>
        </h1>
    </div>

    <div class="sergio-video-text__content">
        <p>Siti WordPress su misura, veloci, leggibili e pensati per valorizzare la tua identità online.</p>
    </div>
</section>

CSS:

.sergio-video-text {
    position: relative;
    width: 100%;
    min-height: 560px;
    overflow: hidden;
    background: #000;
    isolation: isolate;
}

.sergio-video-text__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sergio-video-text__mask {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    mix-blend-mode: screen;
}

.sergio-video-text__mask h1 {
    margin: 0;
    color: #000000;
    font-size: clamp(4.5rem, 16vw, 15rem);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.08em;
    text-transform: uppercase;
    text-align: center;
}

.sergio-video-text__mask h1 span {
    display: block;
}

.sergio-video-text--dark .sergio-video-text__mask {
    background: #000000;
    mix-blend-mode: multiply;
}

.sergio-video-text--dark .sergio-video-text__mask h1 {
    color: #ffffff;
}

.sergio-video-text__content {
    position: absolute;
    left: 50%;
    bottom: 42px;
    transform: translateX(-50%);
    z-index: 2;
    width: min(90%, 760px);
    text-align: center;
    color: #ffffff;
}

.sergio-video-text__content p {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.35rem);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .sergio-video-text {
        min-height: 420px;
    }

    .sergio-video-text__mask h1 {
        font-size: clamp(3.5rem, 22vw, 7rem);
        letter-spacing: -0.06em;
    }

    .sergio-video-text__content {
        bottom: 28px;
    }
}

Attenzione alla leggibilità

Questo tipo di effetto è molto bello, ma va usato con attenzione.

Il testo deve essere grande. Se usi una parola molto piccola, l’effetto perde forza e diventa difficile da leggere.

Meglio usare parole brevi e potenti, per esempio:

• DESIGN
• VISIONE
• BRAND
• CREATIVITÀ
• WORDPRESS
• PORTFOLIO
• STUDIO
• DIGITAL

Funziona meno bene con frasi lunghe, paragrafi o testi descrittivi.

Questo effetto va pensato più come elemento visuale che come normale contenuto testuale.

Attenzione al peso del video

Anche se non usiamo JavaScript, stiamo comunque caricando un video. Quindi bisogna stare attenti alle performance.

Il video dovrebbe essere:

• breve;
• leggero;
• in formato MP4;
• possibilmente senza audio;
• compresso bene;
• non troppo grande in termini di risoluzione.

Per una hero section spesso non serve caricare un video enorme in 4K. Un file da 1920px di larghezza può bastare, ma in molti casi anche meno, soprattutto se il video viene usato solo come texture dentro al testo.

L’ideale è scegliere un video con movimento morbido, non troppo caotico, perché dentro alle lettere ci sarà già poco spazio visivo.

Aggiungere un’immagine di fallback

Su alcuni dispositivi, oppure in condizioni particolari, il video potrebbe non partire subito. Per questo motivo è buona pratica aggiungere un’immagine di anteprima usando l’attributo poster.

<video class="sergio-video-text__video" autoplay muted loop playsinline poster="immagine-fallback.jpg">
    <source src="video.mp4" type="video/mp4">
</video>

Esempio WordPress:

<video class="sergio-video-text__video" autoplay muted loop playsinline poster="https://www.tuosito.it/wp-content/uploads/poster-video.jpg">
    <source src="https://www.tuosito.it/wp-content/uploads/video.mp4" type="video/mp4">
</video>

Il poster viene mostrato prima del caricamento del video o nel caso in cui il video non venga riprodotto.

Accessibilità: cosa considerare

Dal punto di vista dell’accessibilità, bisogna fare attenzione.

Se il video è puramente decorativo, possiamo nasconderlo agli screen reader con:

aria-hidden="true"

Esempio:

<video class="sergio-video-text__video" autoplay muted loop playsinline aria-hidden="true">
    <source src="video.mp4" type="video/mp4">
</video>

Il testo, invece, deve rimanere vero testo HTML, non un’immagine. Questo è un vantaggio importante della soluzione che abbiamo visto: il titolo rimane un vero h1, h2 o altro heading.

Quindi Google, screen reader e browser continuano a leggere il contenuto come testo reale.

L’unica cosa da evitare è usare questo effetto su testi fondamentali troppo piccoli o poco leggibili.

Meglio usare H1 o H2?

Dipende da dove inserisci l’effetto.

Se la scritta è il titolo principale della pagina, puoi usare un h1.

<h1>DESIGN</h1>

Se invece l’effetto è dentro una sezione interna della pagina o in mezzo a un articolo, meglio usare un h2.

<h2>WORDPRESS</h2>

La scelta non deve essere estetica, ma semantica.

L’heading deve rispettare la struttura della pagina.

Variante con testo non completamente centrale

Possiamo anche creare una composizione più editoriale, con il testo allineato a sinistra.

.sergio-video-text__mask {
    justify-content: flex-start;
    padding-inline: clamp(24px, 8vw, 120px);
}

.sergio-video-text__mask h1 {
    text-align: left;
}

Questa variante è molto interessante per una hero section più da portfolio o agenzia creativa.

Il testo non resta al centro, ma diventa parte del layout.

Variante con altezza a schermo intero

Per rendere la sezione alta quanto tutto lo schermo, puoi modificare questa parte:

min-height: 500px;

in:

min-height: 100vh;

Esempio:

.sergio-video-text {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: #000;
    isolation: isolate;
}

Questa soluzione è perfetta per una homepage o una landing page, ma può risultare eccessiva dentro un normale articolo di blog.

Possibili problemi

Il video non parte su mobile

Controlla di avere questi attributi:

autoplay muted loop playsinline

Senza muted, molti browser bloccano l’autoplay.

Senza playsinline, su alcuni dispositivi il comportamento può essere meno prevedibile.

L’effetto non si vede

Controlla questi elementi:

mix-blend-mode: screen;

oppure:

mix-blend-mode: multiply;

Controlla anche che il colore del testo e il colore dello sfondo siano corretti.

Per la versione chiara:

background: #ffffff;
color: #000000;
mix-blend-mode: screen;

Per la versione scura:

background: #000000;
color: #ffffff;
mix-blend-mode: multiply;

Il testo è poco leggibile

Usa un font molto pesante.

Per esempio:

font-weight: 900;

Aumenta la dimensione del font e riduci il numero di parole.

L’effetto funziona meglio con testi grandi e compatti.

Il video si vede male dentro alle lettere

Scegli un video con buon contrasto.

Se il video è troppo uniforme, l’effetto si percepisce poco. Se invece è troppo caotico, può disturbare la lettura.

L’ideale è un video con movimenti morbidi, luci, texture, paesaggi, dettagli astratti o scene con variazioni cromatiche evidenti.

Quando usare questo effetto

Questo effetto è molto bello, ma non va usato ovunque.

Funziona bene quando vuoi creare un momento visivo forte, per esempio:

• apertura di una homepage;
• titolo di una landing page;
• sezione portfolio;
• intro di un progetto;
• pagina personale;
• pagina evento;
• blocco visuale dentro un articolo.

Funziona meno bene per:

• testi lunghi;
• contenuti informativi;
• paragrafi;
• pulsanti;
• elementi fondamentali per la conversione;
• testi piccoli.

In altre parole: usalo come effetto scenografico, non come soluzione tipografica standard.

Conclusione

Inserire un video dentro a un testo con il solo CSS è possibile usando un piccolo trucco basato su mix-blend-mode.

Non stiamo applicando il video direttamente come sfondo del testo, perché il CSS non permette di usare un file video con background-clip: text. Però possiamo ottenere un effetto visivo molto simile sovrapponendo video, livello colorato e testo, sfruttando le modalità di fusione CSS.

Il risultato è moderno, leggero e adatto a sezioni molto visive.

Con poche righe di HTML e CSS possiamo creare una hero section d’impatto, senza JavaScript, senza plugin e senza dipendere da librerie esterne. L’importante è scegliere bene il video, mantenere il testo grande e usare l’effetto solo dove ha davvero senso dal punto di vista del design.