Salta ai contenuti

Video

Mostra video ospitati, YouTube o Vimeo con layout reattivo e controlli di riproduzione.

Usa questo blocco per aggiungere un video ospitato, YouTube o Vimeo con controllo flessibile su layout, riproduzione, didascalie e overlay. È adatto a demo di prodotto, tutorial, contenuti di campagna e storytelling del brand, dove la presentazione deve risultare intenzionale sia su desktop sia su mobile. Per un contesto più ampio su come funzionano i blocchi nei temi, vedi documentazione Shopify su sezioni e blocchi

Questo blocco supporta un file video ospitato oppure l’URL di un servizio video. Per YouTube o Vimeo, usa il normale link del video invece del codice di incorporamento. Se carichi un file ospitato, aggiungere un’immagine poster offre al video un primo fotogramma più pulito prima dell’inizio della riproduzione.

Le impostazioni del rapporto d’aspetto ti aiutano a controllare la forma del video su tutti i dispositivi. Default mantiene il media nelle sue proporzioni naturali, mentre un rapporto fisso è utile quando desideri un allineamento più pulito con il contenuto circostante o un aspetto coerente tra più blocchi video.

La larghezza massima controlla quanto il video può apparire ampio nello spazio disponibile. Un layout a larghezza intera funziona bene per contenuti immersivi, mentre una larghezza più contenuta può risultare più equilibrata quando il video si trova vicino al testo o ad altri contenuti.

Le impostazioni di riproduzione controllano quanto il blocco appare attivo nella pagina. La riproduzione automatica può creare un’esperienza più dinamica, la ripetizione funziona bene per clip brevi e ripetibili, mentre l’audio disattivato o i controlli del player influenzano quanto controllo hanno i visitatori durante la riproduzione.

Se attivi la riproduzione automatica, mantieni il video disattivato per un’esperienza più fluida. La riproduzione automatica con audio ha più probabilità di risultare invasiva e potrebbe non comportarsi in modo coerente su tutti i dispositivi.

Usa la didascalia per aggiungere contesto sopra o sotto il video, ad esempio una breve spiegazione, un dettaglio del prodotto o un messaggio di campagna. Funziona meglio quando supporta il media invece di ripetere ciò che gli utenti possono già vedere.

La posizione della didascalia ti aiuta a decidere se il testo debba introdurre il video prima della riproduzione o fungere da contesto successivo sotto di esso. L’allineamento del testo e la dimensione dovrebbero corrispondere al contenuto circostante, così il blocco risulta integrato anziché separato.

Le impostazioni overlay applicano un colore o un gradiente sopra l’area video. Sono utili quando desideri una presentazione più in linea con il brand, un contrasto più forte per le icone o un aspetto più intenzionale nello stato di pausa.

L’opacità determina quanto del video rimane visibile sotto l’overlay. Un’opacità più bassa mantiene il media più in evidenza, mentre un’opacità più alta crea un trattamento visivo più marcato.

Lo stile overlay controlla quando l’overlay viene mostrato. Un overlay sempre visibile è ideale quando il video fa parte di un layout molto stilizzato, mentre mostrarlo solo in pausa mantiene la riproduzione più pulita.

Scegliere Always show disattiva i controlli del player video, anche se i controlli sono abilitati altrove nel blocco.

Queste impostazioni controllano come il blocco viene posizionato nello spazio disponibile su desktop e mobile. Sono utili quando il video deve allinearsi in modo diverso a seconda della dimensione dello schermo o del layout circostante.

Un allineamento separato per desktop e mobile può aiutare un blocco a risultare equilibrato su schermi ampi senza imporre la stessa posizione sui dispositivi più piccoli.

Queste impostazioni sostituiscono i colori predefiniti del blocco per elementi come bordi, icone e testo della didascalia. Usale quando il video ha bisogno di un contrasto più forte o di una corrispondenza più vicina a una campagna o a un’area contenuto specifica. Per maggiori dettagli, vedi il Impostazioni colore fornito dalla fonte.

Le impostazioni di visibilità ti permettono di nascondere il blocco su desktop o mobile. Questo è utile quando desideri trattamenti media diversi per dimensioni di schermo diverse, ad esempio un video ampio su desktop e un’alternativa più semplice su mobile. Per maggiori dettagli, vedi il Impostazioni di visibilità fornito dalla fonte.

Le impostazioni dell’editor influiscono solo su come il blocco viene etichettato nella barra laterale dell’editor. Un titolo personalizzato per l’editor è utile quando hai più blocchi video e vuoi identificarli rapidamente in base alla posizione o allo scopo.

  1. Scegli la fonte giusta. Usa un file ospitato quando desideri un controllo più stretto sulla presentazione, oppure un link YouTube o Vimeo quando preferisci gestire il video su quel servizio.
  2. Abbina la forma al layout. Usa proporzioni naturali per incorporamenti semplici e passa a rapporti fissi quando ti serve una griglia più uniforme o un layout reattivo più pulito.
  3. Usa gli overlay con moderazione. Aggiungi solo quanto basta di colore o gradiente overlay per supportare il brand o il contrasto senza far sembrare il video troppo scuro o nascosto.
  4. Mantieni le didascalie focalizzate. Una didascalia breve è più efficace quando spiega perché il video è importante o indirizza gli utenti al punto chiave.
  5. Testa su mobile. Video a larghezza intera, riproduzione automatica e file ospitati di grandi dimensioni possono risultare pesanti su schermi più piccoli, quindi controlla il blocco su mobile prima di pubblicare.
  6. Rivedi entrambe le viewport. I controlli su desktop e mobile possono influire in modo diverso su allineamento, visibilità e comportamento del media, quindi verifica entrambi i layout prima di terminare.
  7. Usa le sovrascritture in modo intenzionale. I valori vuoti o con stile predefinito in genere mantengono lo stile di fallback circostante, mentre colori espliciti, gradienti o scelte media separate per desktop e mobile rendono il blocco più indipendente.
  8. Verifica il comportamento commerciale nel contesto. Se il video è collegato ad azioni di prodotto o carrello, verifica prodotto, variante, quantità e disponibilità selezionati così le azioni configurate corrispondano allo stato della pagina.