Come rendere mobile responsive i video youtube embedded in un sito web

Quando incorporo un video di Youtube in una pagina web devo definire la larghezza e l'altezza dell'iframe che contiene il video. Le dimensioni dell'iframe sono fisse creando un problema di visualizzazione sui diversi device.

Esempio. Un video 600x400px è visualizzato bene sui PC e sui tablet ma è decisamente troppo grande per i display degli smartphone. Il video allarga e distorce il layout della pagina web sui dispositivi mobile. D'altra parte, fissare la finestra del video a 300x200pc va bene sugli smartphone ma è decisamente troppo piccola per i PC.

Per evitare questo problema bisogna rendere mobile responsive il video di Youtube.

Creo una classe nel CSS apposita per gli iframe responsive.

1. .iframe-responsive{position: relative; width: 100%; padding-bottom: 56.25%; height: 0; }
2. .iframe-responsive iframe{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }

Nel codice HTML della pagina web inserisco una DIV che richiama la classe iframe-responsive.

Va inserito nella sezione BODY nel punto in cui voglio visualizzare il video.

1. <div class=iframe-responsive>
2. </div>

All'interno della DIV inserisco il codice embedded del video di Youtube che voglio visualizzare

1. <div class=iframe-responsive>
2. <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/GvaDs0FexLc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
3. </div>

La classe iframe-responsive modifica il dimensionamento del video rendendolo automatico ( mobile responsive ).

Ora l'iframe che contiene il video si adatta automaticamente alle dimensioni della pagina web mantenendo la stessa proporzione tra larghezza e altezza del video.

In questo modo, il video viene visualizzato correttamente sia sugli schermi dei PC/Tablet, sia su quelli degli smartphone.

Metodo alternativo

Se non è possibile modificare il file css del sito, si può sempre aggiungere a mano la classe .iframe-responsive direttamente nel codice HTML della pagina web tramite il tag <STYLE>

1. <style>
2. .iframe-responsive{position: relative; width: 100%; padding-bottom: 56.25%; height: 0; }
3. .iframe-responsive iframe{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
4. </style>
5. <div class=iframe-responsive>
6. <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/GvaDs0FexLc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
7. </div>

Il risultato finale è lo stesso.

E così via.