Come adattare automaticamente i video alle risoluzioni dei dispositivi desktop e mobile (Responsive)

Blogger

Come rendere Responsive i video di Youtube, di Vimeo e di altri siti di video-sharing per adattare il loro player alla dimensione del dispositivo con cui vengono aperti.

Quando si vuole incorporare un video di Youtube si va sotto il Player e si clicca su Condividi -> Codice da incorporare per poi copiare il codice dell’iframe da incollare in Modalità HTML.
L’iframe ha per sua natura i parametri della larghezza e dell’altezza che poi ne fisserà le dimensioni del player da visualizzare nella pagina web. La larghezza, e di conseguenza l’altezza per mantenere inalterate le proporzioni, potrà essere personalizzata al pixel andando su Mostra Altro per poi scegliere le dimensioni personalizzate. Il codice da incollare muterà in tempo reale.
Una dimensione giusta del player video per un post su un blog può essere quella con larghezza che va da 560 a 640 pixel. Il problema si palesa quando questo stesso post si apre con uno smartphone visto che il player del video risulterà tagliato inesorabilmente.
Questa difficoltà non esiste nei nuovi Temi Responsive di Blogger che adattano automaticamente le dimensioni del video a quello del dispositivo. Ecco come si vede lo stesso video pubblicato con gli stessi parametri nella versione mobile di un blog di Blogger non Responsive e di uno Responsive.

COME RENDERE UN VIDEO RESPONSIVE CON I CSS

Usando il linguaggio CSS possiamo creare una regola per rendere Responsive i video e adattarli automaticamente alla risoluzione del dispositivo con cui vengono aperti.

1) METODO GENERALE PER RENDERE RESPONSIVE UN VIDEO IN UNA PAGINA WEB

Se vogliamo che il nostro video si adatti automaticamente alle dimensioni del dispositivo dobbiamo incollare in una pagina web un codice che abbia questa struttura.

 

 

<style>
.video-player {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-player iframe,
.video-player object,
.video-player embed {
position: absolute;
top: 0;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
}
</style>
<div class=”video-player“>
<!– Codice di Youtube –></div>

 

Con questo codice il player verrà mostrato in tutta la larghezza disponibile nel post sia nella versione desktop sia nella versione mobile.

 

2) COME RENDERE RESPONSIVE I VIDEO DI YOUTUBE SU BLOGGER

Gli utenti della piattaforma Blogger possono rendere responsive i video di Youtube in modo pressoché automatico inserendo nel codice del Tema la prima parte del codice precedente. Si va su Bacheca -> Tema -> Modifica HTML e si cerca la sezione <b:skin>.  Si clicca sulla freccetta nera posta alla sinistra per visualizzare tutto il codice della sezione. Con Ctrl+F si cerca la riga ]]></b:skin> quindi subito sopra si incolla.
/* VIDEO PLAYER RESPONSIVE */
.video-player {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-player iframe,
.video-player object,
.video-player embed {
position: absolute;
top: 0;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
}
Si salva il Tema. Quando si vuole pubblicare un video si usa un codice come questo
<div class=”video-player”>
<!– Codice di Youtube –></div>
Ecco un esempio di un codice di un video responsive di Youtube
<div class='video-player'> <iframe width="700" height="394" src="https://www.youtube.com/embed/zzEidMVRsuE?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> </div>
È interessante notare che se anche impostiamo una larghezza superiore all’area del post (700 nel codice di esempio) il video non sarà tagliato e prenderà tutto lo spazio disponibile.
3) VIDEO DEGLI ALTRI SITI DI VIDEO SHARING

Questo metodo può essere applicato anche ai video presi dagli altri siti come per esempio Vimeo. Si va sul bottone Share visibile sotto il player quindi si clicca su Embed e si copia il codice. Può essere tralasciata la parte di codice tra <p> e </p> compresi e considerare solo quella dell’iframe. Tale codice si incolla con questa struttura
<style>
.video-player {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-player iframe, .video-player object, .video-player embed {
position: absolute;
top: 0;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
}
</style>
<div class="video-player">
<iframe src="https://player.vimeo.com/video/214537001" width="640"
height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen
allowfullscreen></iframe>
</div>
Questo codice funzionerà in tutte le pagine HTML. Gli utenti di Blogger possono incollare nel post solo la seconda parte del codice nel caso che abbiano nel codice Tema già incollato la prima parte.
Nessun commento

Lascia un commento

Blogger
Come mostrare il numero di post e di commenti di un blog su Blogger

            A seguito di un commento appena ricevuto visto che mi sarebbe stato difficile rispondere passo alla realizzazione di un instant post sul tema che mi è stato posto. Nel commento mi si chiedeva se fosse possibile creare un widget che mostrasse il numero totale …

Blogger
Come inserire una immagine di sfondo nei titoli dei post di Blogger.

Ho ricevuto questa strana richiesta in un commento sul sito che mi ha portato a scrivere questo instant post. Lascio ai lettori eventuali disquisizioni sulla bontà estetica dell’inserimento di uno sfondo con una immagine nei titoli dei post e passo a fissare alcuni punti di quello che sarà il prosieguo …

Blogger
Come aggiungere delle note con link in fondo ai post di Blogger e WordPress

Ho appena ricevuto una richiesta su una personalizzazione di un articolo di qualsiasi piattaforma per potervi inserire delle note cliccabili. Se ho capito bene la richiesta fattami ma penso proprio di sì mi si chiede se sia possibile inserire delle Note in un post mediante una simbologia standard come l’aggiunta …

Privacy Preference Center

Essenziali

I cookies “essenziali” sono i cookies strettamente necessari per consentire apposite funzionalità richieste. Alcune funzionalità dei nostri siti, quali ad esempio la login facilitata ai nostri servizi, non funzionano senza l’uso di cookies e sarebbe condizionata non solo la tua esperienza sul sito, ma anche la capacità di fare qualcosa di utile

google.com,facebook.com

Funzionali

I cookies “funzionali” vengono utilizzati per fornire servizi o per ricordare le impostazioni per migliorare la tua visita e l’esperienza nel nostro sito

facebook.com,google.com

Statistici

I cookies “statistici” raccolgono informazioni su come utilizzi il nostro sito web ed i nostri servizi, per esempio quali sono le pagine visitate, e gli eventuali errori che si possono incontrare. Questi cookies sono completamente anonimi e vengono utilizzati solo per aiutarci a migliorare come funziona il nostro sito e capire gli interessi dei nostri utenti.

facebook.com,google.com

Close your account?

Your account will be closed and all data will be permanently deleted and cannot be recovered. Are you sure?

Are you sure?

By disagreeing you will no longer have access to our site and will be logged out.