Inserire video nei contenuti di Joomla!
Inserire video nei contenuti di Joomla!
Extrowebsite

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:

Incorporare il codice da YouTube
Incorporare il codice da YouTube

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>

Salvare ed avviare il filmato. Tutto molto semplice ma 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 . 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.

N.B. Per vedere correttamente il video, è necessario disabilitare l'editor di Joomla!

Il codice CSS per div class 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.

BMW Concept X2
Un primo sguardo al Concept BMW X2 che ha celebrato la sua prima mondiale al salone internazionale di Parigi 2016
Concept BMW X2