Shortcode per Video 100% Responsive

Uno dei problemi di cui spesso sento discutere e come rendere responsive al 100% i video inseriti nei nostri post. Quando dico al 100% vuol dire eliminare totalmente quelle fasce nere che ad esempio youtube inserisce nei video.

WordPress oggi ci da la possibilità di inserire in modo molto semplice un video nei propri post, inserendo direttamente dell’editor il link al video.

https://www.youtube.com/watch?v=ID_VIDEO

In questo modo avremo come risultato la visualizzazione del video youtube.
Ma se il nostro sito è realizzato in responsive design quindi ottimizzato per una visualizzazione con dispositivi mobili, di sicuro limitarci a inserire il link nell’editor qualche problema ce lo darà.

Per ovviare al problema in modo molto semplice oggi spiegherò come realizzare uno shortcode e il CSS necessario che ci permetterà di avere dei video al 100% responsive.

Voglio premettere che non spieghero cosa sia uno shortcode e come si realizza, quindi chi vuole approfondire lo studio su cosa sono e come si realizzano vi consiglio di predere come riferimento il Codex di WordPress: Shortcode API.


Detto questo andiamo a realizzare lo shortcode:

/**
 * Shortcode responsive_video:
 *
 * @param $atts
 * @param null $content
 * @return string
 */
function pic_shortcode_responsive_video_type( $atts, $content = null ) {

    extract(shortcode_atts(array(
        'video_id'	=> '',
        'url_type' => '',
    ), $atts));

    if($url_type == 'youtube'){

        $url_type = 'http://www.youtube.com/embed/';
        $out = '<div class="responsive-video youtube"><iframe width="1280" height="720" frameborder="0" src="'.$url_type.$video_id.'?rel=0" allowfullscreen=""></iframe></div>';
    }
    elseif($url_type == 'vimeo'){

        $url_type = 'http://player.vimeo.com/video/';
        $out = '<div class="responsive-video youtube"><iframe width="500" height="281" frameborder="0" allowfullscreen="" src="'.$url_type.$video_id.'" allowfullscreen=""></iframe></div>';
    }
    else
    {
        $url_type = '';
        $out = '<strong>Attenzione:</strong> hai dimenticato di specificare la <strong>url_type</strong> del video.';
    }

    return $out;

}
add_shortcode('responsive_video', 'pic_shortcode_responsive_video_type');

Come potete vedere dal codice gli attributi presenti sono due video_id e url_type, che andremo a valorizzare rispettivamente, video_id con l’id del video da inserire es: video_id=’LA6ZuVG6k7g’url_type con il tipo di url da usare per la visualizzazione del video es: url_type=’youtube’.

Con url_type adremo a specificare la url da usare in abbinamento con l’id del video che puo essere youtube o vimeo.

Una volta realizzato lo shortcode andremo a scrivere il codice CSS necessario affinche il video sia veramente responsive come abbiamo detto.
L’argomento riguardante il css, dove tra l’altro viene spiegato molto bene il funzionamento della regola, è stato trattato dall’amico Andrea Leti nel suo post: Video Responsive – Soluzione definitiva al quale vi rimando per un maggiore approfondimento.

Ecco il codice CSS necessario:

.responsive-video {
    height: 0;
    margin-bottom: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 0;
    position: relative;
}

.responsive-video iframe, .responsive-video object, .responsive-video embed, .responsive-video video {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

Spero che la mia soluzione ti sia utile.

Buon Video Responsive a tutti 😉

Condividi sui tuoi social preferiti !

0
2
0
0
0

L'autore: Alfredo Piccione

Webdesigner, Wordpress Designer & Developer, svolgo il mio lavoro con passione e dedizione cercando di tenermi aggiornato e sperimentando sempre cose nuove. Amo questo lavoro perché mi permette di esprimere il mio lato creativo, mi piace curare i miei lavori e dare sempre il meglio di me stesso.

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>