Come creare banner con link con un video

Come creare un banner pubblicitario con collegamento che mostra un video che si ripete all'infinito.

L'obiettivo di questo post sarà quello di creare una breve animazione che si ripete all'infinito, con o senza audio, da inserire in un post o nel layout di un sito per pubblicizzare una campagna online o per rendere più accattivante il collegamento a un articolo a cui teniamo particolarmente.

Ci sono diversi servizi gratuiti che ci consentono di creare dei banner pubblicitari da usare anche per altre tipologie di collegamenti. Si possono creare pure delle immagini animate con programmi di grafica. Magari in altri articoli vedremo anche altre possibili soluzioni.

In questo articolo vedremo come creare una nostra pubblicità e come collegarci un link verso una qualsiasi pagina web. Il contenuto del banner sarà un estratto da un video, che potrà essere creato dal webmaster con la fotocamera dello smartphone, aiutandosi poi con dei programmi di editing video per aggiungere eventualmente del testo e della grafica. Si possono usare anche dei video senza copyright per poi adattarli alle nostre  esigenze specifiche.

Si può aggiungere del testo a un video con iWisoft Free Video Converter, che può essere scaricato gratuitamente da CCM. Il formato del video deve essere preferibilmente MP4 che è il più adatto ai tag HTML5. Ci sono programmi anche più sofisticati per farlo con Openshot, Shotcut e Movie Maker, tutti gratuiti.

Come secondo passaggio si carica il video su Dropbox o Google Drive per poi ricavarne il link di download.

1. Link diretto di download su Google Drive
2. Link diretto di download su Dropbox.

Trovare il link di download su Dropbox è particolarmente semplice, visto che basta scegliere Condividi e, nell'URL che poi si copia, sostituire la parte finale ?dl=0 con ?dl=1.

Si crea quindi un player HTML5 del video senza controlli, cioè che mostri solo il filmato.

Si utilizza un codice con questa struttura di base, senza il tag controls="" che mostrerebbe il player.

<div align="center"><a href="URL_COLLEGAMENTO" target=_blank"><video autoplay="autoplay" loop="loop" width="384" height="216" >
<source src="URL_VIDEO" type="video/mp4"></source></video></a></div>

Configurazione:

1. Il tag center serve per centrare il video nel layout.
2. Al posto di URL_COLLEGAMENTO si incolla l'indirizzo della pagina web da collegare al banner.
3. Le dimensioni del video (384x216) possono possono essere personalizzate
4. Al posto di URL_VIDEO si incolla l'URL di download di Dropbox o Google Drive.
5. Il tag target=_blank" è opzionale e serve per aprire il collegamento in un'altra scheda.

Tale codice va incollato in un widget HTML/Javascript oppure in un post in modalità HTML. 

Il video si riprodurrà all'infinito, esattamente come le pubblicità che siamo abituati a vedere nelle pagine web, per la presenza del tag loop="loop". Il tag autoplay="autoplay" è invece quello che fa iniziare la riproduzione senza azione da parte del lettore. Il filmato può avere anche un audio. C'è però da considerare che una riproduzione audio automatica è fastidiosa per molti navigatori, quindi eviterei di inserirlo.

Un banner di questo genere può avere gli utilizzi più svariati. Sta alla fantasia dello webmaster creare un video adatto allo scopo che si prefigge. Il formato MP4 è uno tra i più leggeri, quindi non appesantirà più di tanto il caricamento della pagina se il filmato dura solo pochi secondi, come del resto è pratica comune nella pubblicità. Chi cliccherà con il destro del mouse sopra al banner potrà scaricare il filmato. Il video si riprodurrà solo su desktop mentre su mobile si vedrà solo l'immagine del primo fotogramma su cui si potrà comunque toccare per aprire il collegamento.