• A
    Super User •

    Come fare per rendere responsive i video nei nostri siti?

    Ciao a tutti,
    sia se ci troviamo ad inserire un video di YouTube, Vimeo o di altro sito di video sharing, una delle preoccupazioni può essere quella di rendere questo video responsive e dunque garantire un'adeguata impaginazione anche nella visualizzazione da mobile o da tablet. Infatti non sempre (quasi mai) i temi responsive prevedono anche l'adattamento di video ed immagini, quindi dobbiamo vedercela noi ;).

    Qualche giorno da su Blog.tecnospazio.org è uscito un articolo che ci offre una soluzione a questo problema indicandoci un'istruzione da inserire nel CSS e la relativa classe da richiamare con un div all'interno della pagina HTML. Praticamente la stessa offerta anche in questo altro articolo in lingua inglese.

    In entrambi articoli non si fa riferimento ad alcun CMS come se quindi il procedimento dovrebbe essere valido per tutte le piattaforme, quindi potete sperimentarlo sulle vostre proprietà web a prescindere dal CMS utilizzato ;).

    Tuttavia, ahimé, sul mio sito Wordpress questo procedimento non funge! Forse ci sarà un problema con il tema o forse altro: purtroppo non ho approfondito abbastanza per trovare la spiegazione ma ho ripiegato su un plugin che vado a consigliarvi.

    Molto semplice da utilizzare è il plugin per Wordpress: Responsive Video Light. Insomma con un click ci togliamo ogni pensiero anche se per fare le cose fatte bene bisognerebbe aggiornare tutti gli embed presenti nel sito nella formula:

    [responsive_youtube NbCr0UyoFJA]

    Comunque anche senza aggiornare tutti i video la visualizzazione è comunque accettabile: se non altro il player non esce fuori dalla pagina come solitamente capita quando non effettuiamo nessuna operazione per responsivizzare il player.

    Al codice si possono aggiungere anche diversi parametri come l'utilissimo "norel" per evitare la visualizzazione dei related video suggeriti da YouTube al termine di ogni video.

    Per adesso io mi ritengo soddisfatta con questo plugin ma accetto volentieri nuovi suggerimenti e soprattutto sono curiosa di conoscere le vostre esperienze, magari con piattaforme diverse da wordpress :).

    Ciao,
    Anna

    :gthi:

    0
  • juanin
    Admin •

    Ora ti bacchetto!!! Non hai studiato al convegno 🙂
    http://programmi.giorgiotave.it/7-problemi-responsive/2296

    Scherzo.

    0
  • A
    Super User •

    Aspettavo proprio un tuo intervento!! Giorgio Tave può confermare e devo dire che non ti sei lasciato attendere nemmeno un po': velocissimo!! Very compliments!!

    Nell'articolo da te indicato sono presenti le istruzioni da inserire nel CSS (su Wordpress: Aspetto > Editor > Foglio di stile); le riporto anche qui:

    [HTML].contenitoreEmbeded {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    }
    .contenitoreEmbeded iframe, .contenitoreEmbeded object, .contenitoreEmbeded embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }[/HTML]

    Dopodiché bisognerebbe:

    inserire il video, dopo aver eliminato dal codice le dimensioni, all’interno di un div con width 100% che verrà in seguito ridimensionato.

    E poi:

    L’iframe contenente il video viene racchiuso in un div attraverso Javascript.

    Protesti spiegare meglio per i profani cosa si intende con queste due ultime indicazioni?

    Magari fare giusto un esempio del codice di embed così modificato e che quindi, avendo inserito nel CSS quelle istruzioni, dovrebbe dare l'effetto desiderato ;). Ti ringrazio in anticipo.

    A.

    PS. Troppe cose da imparare al convegno: impossibile ricordarle tutte (anche se questa mi riguardava... hihihihi)!! Consideriamola come una lezione di recupero :tongueout:!

    0
  • G
    User Newbie •

    Salve a tutti,

    scrivo perchè ho letto l'articolo interessante sul embeb dei video, in particolar modo per quello di VIMEO.

    Vi spiego, il plugin funziona correttamente, però non capisco perchè nel video mi inserisce anche il loghetto del mio account vimeo e il titolo...
    Questo è il sito dove è presente il video incriminato. - aecbroker.com

    Vi ringrazio anticipatamente.

    G.

    0
  • A
    Super User •

    Ciao Gianet,
    benvenuta nel forum ;).

    Guardando il video in home page del sito da te indicato io non vedo né il logo né il titolo. Hai già risolto?

    Ciao,
    A.

    0
Effettua l'accesso per rispondere