Inserire un video nei contenuti di Joomla! non è mai stato così semplice. La comodità viene dal fatto che non serve nessuna estensione evitando di appesantire il CMS. Vediamo come fare.
In rete ci sono tanti plugin che assolvono a tale compito. Personalmente sono contrario, fin quando è possibile, ad installare estensioni quando posso avere lo stesso risultato scrivendo solo qualche riga di codice HTML e CSS.
Copiare il codice da YouTube per incorporare il video
Una volta individuato il video di YouTube che vuoi incorporare nel tuo sito, non devi fare altro che cliccare con il tasto destro su di esso e copiare il codice, come riportato nell'immagine:
Nell'editor di Joomla! basta fare "Incolla" e puoi vedere il codice. Otterrai una stringa simile a quella riportata di seguito:
<iframe width="854" height="480" src="https://www.youtube.com/embed/u7GMHH32_Ow" frameborder="0" allowfullscreen></iframe>
Per inserire il codice dell'iframe di YouTube, disabilitare l'editor di Joomla!. Si rischia, alla prima modifica dell'articolo, che il suddetto codice andrà perso.
Salvare ed avviare il filmato. Tutto molto semplice, giusto?
Attenzione. Il video non verrà visualizzato in maniera corretta sui diversi dispositivi in quanto, come si può vedere dal codice, abbiamo una larghezza di 854 pixel. In uno smartphone il video verrebbe "tagliato".
In un articolo precedente ho trattato l'argomento su come rendere un video responsive, visualizzabile su diverse dimensioni di media. E' il caso di dargli una ripassata per ottenere lo stesso risultato.
Il markup HTML per il video responsive
<div class="video">
<iframe width="854" height="480" src="https://www.youtube.com/embed/u7GMHH32_Ow" frameborder="0" allowfullscreen></iframe>
</div>
Come si può vedere dal codice qui sopra, l'elemento iframe deve essere incluso in un elemento div. Per quanto riguarda la formattazione, entrano in gioco i CSS.
Il codice CSS per div video e l'iframe
.video{
position: relative;
padding-top:30px;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
Passiamo adesso alla formattazione dell'iframe:
.video iframe{
position:absolute;
top:0;
left: 0;
width:100%;
height:100%;
}
Il codice CSS per il div class video e per l'iframe, possono essere scritti tranquillamente nel file generale template.css. Salva il tutto ed aggiorna la pagina.
Qui in basso puoi vedere il video in azione. Fonte: YouTube.