due chiacchiere

Rendere i video fluidi sul blog

Qualche tempo fa ti avevo chiesto di dare un’occhiata ai video presenti sul blog con il tuo cellulare, per vedere se le dimensioni si adattavano correttamente alle dimensioni dello schermo. Dalle mie prove con vari modelli di Android ed iPhone, grazie al servizio (semi) gratuito LambdaTest, mi sembra che ora sia tutto a posto adesso. La richiesta era legata ad un aggiornamento che ho effettuato al mio tema, che a quanto pare era in conflitto con la libreria MediaElement usata da WordPress per inserire il player all’interno degli articoli. Quando ho ripreso le trasmissioni, avevo deciso di mettermi in casa tutti i video che avevo fino a quel momento preso da YouTube, vuoi per motivi ecologici (ho già espresso la mia opinione in merito alla spazzatura digitale), vuoi per essere sicuro di non perdere questi reperti archeologici quando i tenutari di quei canali decidono di chiudere baracca ed emigrare alle Canarie.

Il lettore disponibile all’interno del sistema di gestione che uso non si adatta alla dimensione del contenitore, e bisogna aggiungere un po’ di codice al proprio tema per renderlo più fluido. Le prove che avevo fatto mesi fa sul computer mi davano buoni risultati, ma poi un giorno mi è capitato di aprire un post sul mio cellulare ed ho notato che le dimensioni erano tutte sballate. Così sono andato a rinchiudermi nel mio laboratorio segreto, per trovare una soluzione che funzionasse davvero. Alla fine, dopo aver mescolato per bene tutti gli ingredienti, il distillato finale è stato questo pezzo di codice CSS da aggiungere al proprio tema:

.wp-video,
video.wp-video-shortcode,
.mejs-container,
.mejs-overlay.load {
    width: 100% !important;
    height: 100% !important;
}
.mejs-container {
    padding-top: 56.25%;
}
.wp-video, video.wp-video-shortcode {
    max-width: 100% !important;
}
video.wp-video-shortcode {
    position: relative;
}
.mejs-mediaelement {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.mejs-controls {
    display: none;
}
.mejs-overlay-play {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto !important;
    height: auto !important;
}

E niente, volevo condividere questa cosa con te.

Lascia un commento

Torna in cima alla pagina