Da qualche tempo Facebook consente di incorporare i propri video nelle 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 media.
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)
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>
Richiamando la pagina .html dal browser, avremmo un risultato simile al seguente:
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, è possibile vedere il video di Facebook nel nostro sito web, il quale si adatterà perfettamente a qualsiasi dimensione di schermo.