Sergio Pinna

Web Designer

video-responsive-automatico

Rendere responsive qualsiasi tipo di video automaticamente

Con il presente articolo, Rendere responsive qualsiasi tipo di video automaticamente, renderai responsive tutti gli articoli che desideri inserire in un articolo di Wordpres senza dover toccare una riga di codice dell’articolo stesso.

Tempo addietro scrissi di un articolo per rendere responsive i video di YouTube.

Rispetto all’articolo precedente, Rendere responsive i video di YouTube, la limitazione di quel procedimento sta proprio nel fatto che si è obbligati a dover racchiudere l’iframe all’interno di un div manualmente.

Mentre grazie a questo piccolo accorgimento spiegato qui sotto, puoi avere tutti i video, (iframe, object, ecc.ecc.) responsive automaticamente e senza dover metter mano al vostro codice nei vari post del vostro blog!

Questa è la funzione da aggiungere al file functions.php:

/**
 Aggiunge un div contenitore al codice del video embeddato
**/
function sp_embed_html( $html ) {
 return '<div class="video-container">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'sp_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'sp_embed_html' ); // se avete installato il plugin Jetpack

E questo è il solito codice CSS che permette la magia del responsive:

.video-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px
 height: 0
 overflow: hidden
}
.video-container iframe,
.video-container object,
.video-container embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Adesso non ti rimane che inserire all’interno dei tuoi post l’URL di un video di YouTube, ad esempio:

http://www.youtube.com/embed/QZZirgl4lm8

E grazie ai codici inseriti prima otterrai questo video perfettamente responsive:

Fonte
How to wrap oEmbed-embedded video in DIV tags inside the_content?

Condividi questo articolo