Pubblicato il 24/10/17 - aggiornato il  | 15 commenti :

Come pubblicare video Responsive su Blogger

Come pubblicare video Responsive di Youtube, Vimeo, ecc su Blogger che adattino automaticamente la larghezza alla risoluzione del dispositivo desktop o mobile con cui si aprono.
I codici per incorporare i filmati in una pagina web che vengono ricavati dai siti di video-sharing contengono il parametro width con l'indicazione della larghezza in pixel che può essere impostata direttamente dall'utente.

Nel momento in cui si incolla tale codice in Modalità HTML la larghezza del player del video rimane la stessa anche quando la pagina viene aperta da un dispositivo mobile. Se si sceglie una larghezza per esempio di 560 pixel questa va molto bene se il post viene aperto con un computer ma è eccessiva se invece si apre con uno smartphone.

Per chi utilizza un Tema Responsive di Blogger non è richiesta alcuna azione per rendere il video di Youtube Responsive cioè adattato automaticamente a tutte le risoluzioni. La larghezza del player verrà ridotta automaticamente in funzione della risoluzione del dispositivo con cui viene aperta la pagina.

Anche i video di Vimeo vengono resi Responsive dai nuovi Temi di Blogger così come tutti i video incorporati attraverso un codice di un iframe. Il discorso diventa più complicato se si sta utilizzando un Tema di Blogger classico cioè Non Responsive che ha una versione per il desktop e una per il mobile che si ottiene aggiungendo la stringa ?m=1 a tutti gli URL dei post e delle pagine.

Con tali modelli il player del video non si adatterà automaticamente alle diverse risoluzioni e quindi dovrà essere l'amministratore del sito a provvedere. In questo post vedremo due metodi per farlo in modo piuttosto semplice visto che si salva il codice nel modello in modo da pubblicare i video Responsive senza troppa difficoltà.





CREARE DUE VERSIONI PER IL VIDEO


Il primo metodo è quello di incollare in un file di testo due codici del video con due differenze larghezze. La prima potrebbe essere di 560-600 pixel e verrà mostrata nei dispositivi desktop mentre la seconda di 360-400 pixel che verrà mostrata solo nei dispositivi mobili.

Per passare da un player all'altro si utilizzano le regole Media Query o Media Screen che inseriscono una sorta di vincoli per la visualizzazione di un contenuto. Dopo aver salvato il Tema di Blogger per un eventuale ripristino si va su Bacheca -> Tema -> Modifica HTML e si cerca la sezione <b:skin> per poi cliccare sulla freccetta nera posta a sinistra in modo da visualizzarne tutto il codice. Si cerca l'ultima riga della sezione che è ]]></b:skin>  quindi subito sopra a questa si incolla questo codice

/* VIDEO RESPONSIVE */
@media screen and (min-width: 559px) {
.onlysmartphone {display:none;}
}
@media screen and (max-width: 560px) {
.desktoptablet{display:none;}
}
dove il breakpoint posizionato a 560 pixel può essere modificato a piacere. Si salva il Tema.

Quando si pubblica un video di Youtube o di Vimeo dovremo incollare un Modalità HTML questo codice

<div align='center'> <div class="desktoptablet">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ayo2N8QxDwE?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="onlysmartphone">
<iframe width="320" height="180" src="https://www.youtube.com/embed/Ayo2N8QxDwE?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div>

In questo modo quando il post viene aperto con un computer desktop sarà visibile in video con larghezza 560 pixel mentre se viene aperto con uno smartphone si visualizzerà un player largo 320 pixel. Chiaramente il codice dell'iframe è puramente indicativo e dovrà essere sostituito da quello del video da incorporare.






Un tale codice incollato nell'Editor di Blogger mostrerà due player uno sopra all'altro ma dopo la pubblicazione se si apre un post verrà visualizzato solo un video  seconda della risoluzione del dispositivo.

COME USARE I CSS FLUIDI PER RENDERE RESPONSIVE I VIDEO


Questo secondo sistema è più pratico del primo ed è quello che utilizzo su questo sito. Si va sempre su Bacheca -> Tema -> Modifica HTML e si cerca la riga ]]></b:skin> con la modalità illustrata in precedenza quindi subito sopra a questa si incolla questo codice CSS

/* 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%;
}

Quando si vuole pubblicare un video responsive in un post se ne incolla il codice con questa sintassi
<div class="video-player">
<!-- Codice di un iframe di Youtube o di Vimeo -->
</div>

scegliendo una larghezza almeno pari alla larghezza del layout del post. Dopo la pubblicazione il video non sarà tagliato e prenderà tutta la larghezza della pagina





video-responsive



Si può utilizzare questa tecnica anche senza toccare il template inserendo il codice CSS tra i tag <style> e </style> per poi incollarlo subito sopra al codice HTML del video nella stessa pagina da pubblicare.



15 commenti :

  1. Ciao Ernesto, grazie per questa guida. Il metodo funziona, ma il video mi risulta avere delle bande nere sopra e sotto, cosa che nella riproduzione YouTube non c'è. Forse ha a che fare con questa tua frase finale che non ho perfettamente capito "scegliendo una larghezza almeno pari alla larghezza del layout del post. Dopo la pubblicazione il video non sarà tagliato e prenderà tutta la larghezza della pagina"

    RispondiElimina
    Risposte
    1. Fai riferimento alla seconda opzione
      COME USARE I CSS FLUIDI PER RENDERE RESPONSIVE I VIDEO
      Se tu copi il codice dell'iframe su Youtube non si dovrebbero vedere le bande nere. Se si vedono è perché hai modificato il valore di larghezza e/o altezza nel codice dell'iframe.
      @#

      Elimina
  2. No, ho provato sia a lasciarlo così com'era, sia a mettere "auto", ma in ogni caso mi esce la copertina del video tagliata nei bordi laterali e il video con le bande nere sopra e sotto. Per il resto l'adattamento funziona correttamente, quindi la procedura è corretta. In ogni caso grazie per la pazienza.

    RispondiElimina
    Risposte
    1. Allora non è il video ma la copertina! Non avevo capito. Dopo esserti loggato su Youtube, apri il video e vai su Modifica Video. Nella parte bassa della pagina vedrai le tre miniature proposte da Youtube e quella che è stata scelta. Devi caricare un'altra immagine come copertina che abbia un rapporto tra larghezza e altezza uguale a quello del video, solitamente 16:9. Dopo aver salvato ci vuole però qualche ora prima che Youtube applichi le modifiche
      @#

      Elimina
    2. No scusami Ernesto, mi sono spiegato male. La copertina è tagliata nell'anteprima del video, ma quando schiaccio play viene tagliato il video stesso attraverso delle bande nere sopra e sotto. Insomma, le dimensioni non sono 16:9.

      Elimina
    3. Sì ma allora le bande ci sono anche su Youtube e non solo nel Player visualizzato con il codice di questo post. Dipende dal fatto che il rapporto tra larghezza e altezza del video è diverso da quello standard
      @#

      Elimina
    4. Si può rendere un video con aspect ratio giusto seguendo queste istruzioni
      https://www.ideepercomputeredinternet.com/2019/10/shotcut-barre-nere-filmato-eliminare.html
      Qui c'è anche un video tutorial
      https://youtu.be/5A6H6cxwb1g
      @#

      Elimina
    5. No le bande nere non ci sono su YouTube, ci sono solo nel video caricato sul blog.

      Elimina
    6. È questo?
      https://www.hikikomoriitalia.it/2019/12/gli-hikikomori-sono-soprattutto-maschi.html
      È vero. Ho provato a incollare questo codice

      <style>
      /* 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%;
      }
      </style>
      <div class="video-player">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/HpGuUJqF8Uc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>

      in una pagina web e non si vedono barre nere. Allora ho guardato il codice sorgente della tua pagina e ho visto che hai incollato il video con questo codice

      <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="auto" src="https://www.youtube.com/embed/HpGuUJqF8Uc" width="auto"></iframe>

      che non so dove lo hai trovato. Ma sostituiscilo con uno giusto come questo

      <iframe width="560" height="315" src="https://www.youtube.com/embed/HpGuUJqF8Uc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

      e vedrai che spariscono
      @#

      Elimina
    7. Il codice di iframe preso da YouTube? Ho notato che me lo cambia in automatico una volta dopo il salvataggio del post... io ho sempre incollato quello che mi hai girato anche tu. Hai idea di come possa ovviare a questo problema?

      Grazie della pazienza.

      Elimina
    8. Adesso ho provato a mettere il codice che mi hai indicato tu e me l'ha tenuto uguale anche dopo il salvataggio, ma le barre nere rimangono. Davvero un mistero...

      Elimina
    9. Con il codice che ti ho dato io le barre nedre non ci sono. Il rapporto è esattamente di 16:9. L'ho testato su questo sito
      https://htmledit.squarefree.com/
      Puoi provare anche tu
      @#

      Elimina
    10. Non saprei. Per tamponare, ho messo come altezza 90% e le barre nere diminuiscono anche se non scompaiono. Grazie comunque!

      Elimina
    11. Puoi eliminare il mio codice nei CSS e lasciare solo quello di Youtube e basta quindi senza metterlo tra
      < div class="video-player" > e < /div >
      Se il codice che hai copiato da Youtube è quello che ti ho postato nel commento 2.g le barre nere dovrebbero sparire. Se non spariscono ci dovrebbe essere un problema nativo nel modello che però mi sfugge.
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy