Responsive Facebook Video
Responsive Facebook Video
Extrowebsite

Da qualche tempo, Facebook consente di incorporare i propri video nelle nostre pagine web.

Tuttavia, per impostazione predefinita, i video di Facebook non sono responsive.
Nel tutorial di oggi vedremo come fare affinchè anche i video di Facebook si adattino a tutte le dimensioni di schermo.

Recuperare il codice del video da incorporare

  • accedere a Facebook ed individuare un video
  • fare clic sulla freccia grigia in alto a destra (1)
  • dal menu a discesa Selezionare Incorpora (2)
Ottenere il codice video facebook
Ottenere il codice del video Facebook

Subito dopo, si aprirà una pop-up nella quale è scritto: "Copia e incolla questo codice sul tuo sito Web".

Mettere il puntatore del mouse nel campo di testo ed immediatamente lo sfondo diventerà di colore blue.

Copiare ed incollare il codice nel punto in cui vogliamo il video, nella nostra pagina web.

Il codice sarà simile a quello riportato:

<iframe src="https://www.facebook.com/plugins/video.php?href=https.....</iframe>
Copiare ed incollare codice video facebook
Copiare ed incollare codice per video Facebook

Richiamando la pagina .html dal browser, avremmo un risultato simile al seguente:

Video Facebook di dimendioni fisse
Video Facebook di dimendioni fisse

Dato che il video ha dimensioni fisse, rimarrebe piccolo se si visualizza la pagina da desktop e romperebbe il layout se lo si visualizzasse da smartphone.

Il passaggio successivo è quello di inserire l'elemento iframe in un div.

<div class="fb-video">
<iframe src="https://www.facebook.com/pluginsvideo.php?..."></iframe>
</div>

Codice CSS per rendere il video responsive

Successivamente possiamo procedere con la scrittura del codice CSS

.fb-video{
position: relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}

.fb-video iframe{
position:absolute;
top:0px;
left: 0;
width:100%;
height:100%;
}

Richiamando la pagina da desktop o da smartphone, , incorporato nella nostra pagina, si adatterà perfettamente a qualsiasi dimensione di schermo.