Blogger Book

Per rendere i video di YouTube incorporati su Blogger completamente responsive (in modo che si adattino automaticamente e senza sbavature agli schermi di smartphone, tablet e PC), puoi aggiungere una regola CSS globale direttamente nel codice del tuo tema.

1.Accedi all'editor HTML del tema:Pannello di Blogger.

Apri Blogger, seleziona Tema dal menu laterale, clicca sulla freccia accanto al pulsante Personalizza e scegli Modifica HTML.

Verifica: Si apre l'editor di codice completo del tuo template.

2.Aggiungi il codice per la reattività:Inserimento CSS.

Usa la combinazione Ctrl + F (o Cmd + F su Mac) per trovare la stringa ]]></b:skin> nel codice. Subito prima di questo tag, incolla il seguente blocco di codice CSS:

CSS

/* Video YouTube Responsive */
.post-body iframe {
  max-width: 100%;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
}

Verifica: Assicurati che il blocco CSS sia posizionato correttamente subito prima di ]]></b:skin>.

3.Salva le modifiche al tema:Salvataggio.

Clicca sull'icona del dischetto (Salva) in alto a destra nell'editor per memorizzare le modifiche.

Verifica: Ricevi la notifica di salvataggio avvenuto con successo.

4.Verifica il comportamento sui dispositivi:Test di visualizzazione.

Apri un articolo contenente un video in una finestra in incognito e ridimensiona la finestra del browser (oppure controlla da uno smartphone).

Verifica: Il lettore video si ridimensionerà proporzionalmente mantenendo il formato 16:9 senza tagliare i lati o fuoriuscire dal layout del post.