Condividi!

Logo YoutubeIncludere un video pubblicato su Youtube all’interno di un post o di una pagina del nostro blog WordPress è davvero semplicissimo. Come sempre, però, possono esserci complicazioni legate alla gestione del player in termini di layout.
Cosa accade se il player appare più largo del dovuto? E se volessi restringerlo?
Altro caso importante è la gestione delle dimensioni nei layout Responsive. La larghezza del video, infatti, come tutto il resto del layout, dovrà adattarsi alla larghezza del display del dispositivo corrente.

Includere video youtube in layout NON RESPONSIVE

E’ sufficiente copiare l’url del video all’interno dell’articolo ed il gioco è fatto! WordPress provvederà automaticamente a riconoscerne l’origine e la natura e lo visualizzerà sottoforma di video.

Qualora fosse necessario aggiustare, ad esempio, le dimensioni (larghezza o altezza) del video player, sarà sufficiente inserire il link all’interno del tag embed, come nell’esempio seguente:

In questo modo, il video sarà sempre largo 640px.

Includere video Youtube in layout RESPONSIVE

Se possedete un layout responsive, il lavoro da effettuare è leggermente più complesso.

Sarà necessario, infatti, creare una classe .embed-box e tre ulteriori regole, .embed-box iframe, .embed-box object, .embed-box embedche coprano ogni genere di tag associato al video (iframe, object o embed).

Il css dovrà essere come segue:

.embed-box {
    position: relative;
    padding-bottom: 62.25%; /* ratio for youtube embed */
    padding-top: 30px;
    height: auto;
    overflow: hidden;
}
.embed-box iframe,
.embed-box object,
.embed-box embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

A questo punto, nei vostri post o nelle vostre pagine, potrete inserire l’url del video, attraverso la modalità testuale, come segue:

<div class="embed-box">

</div>

In questo modo, il player sarà, a sua volta, responsive come tutto il resto del layout, poiché parte di un blocco div che si occupa di adattarsi in modo responsive alla dimensione dello schermo. Potete effettuare una prova ridimensionando il vostro browser e dando un occhiata al comportamento del video pubblicato qui in basso.