Pubblicato il 16/06/16 - aggiornato il  | 13 commenti :

Come mostrare un video in autoplay di benvenuto con pulsante di accesso a Blogger.

Come mostrare un video che si riproduce automaticamente quando i lettori aprono una data pagina di Blogger insieme a un pulsante per accedere ai contenuti del blog.
Molti miei articoli vengono ispirati da domande rivoltemi dai lettori nei commenti sul sito o in post nella pagina Facebook. Proprio ieri ne ho ricevuta una su una possibile personalizzazione che potrebbe interessare altre persone per cui ho deciso di dedicarle un post. Mi si chiedeva se fosse possibile realizzare una pagina di benvenuto da mostrare nella homepage del sito o in una qualsiasi altra pagina che mostrasse un video che si riproduce in autoplay. Il lettore dovrebbe aver comunque la possibilità di bypassare tale video e di accedere subito alla pagina del blog su Blogger.

Non so se ho descritto bene la funzionalità ma proporrò comunque una Demo che dovrebbe evitare problemi di interpretazioni. Prima di procedere occorre avere un blog su Blogger e l'indirizzo della pagina in cui mostrare questo video di benvenuto. Ricordo che i blog gratuiti del tipo nomegblog.blogspot.it devono aver gli indirizzi con il .com al posto del .it altrimenti i tag condizionali non funzioneranno.

All'apertura della pagina in oggetto il lettore visualizzerà una cosa simile a questa

video-autoplay-blogger
con un video che inizia a riprodursi posizionato in uno sfondo scuro e con un bottone Accedi al blog per permettere al lettore di visualizzare subito ai contenuti del sito. Il video cesserà di essere visibile ma l'eventuale audio presente continuerà a riprodursi fino alla fine del filmato. Per avere una idea ancora più precisa aprite la pagina di dimostrazione che ho pubblicato in rete.

L'installazione e la personalizzazione non presentano grandi difficoltà. Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca questa riga

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Nei modelli molto vecchi e in alcuni scaricati da internet può darsi che tale riga non ci sia. In tal caso bisognerà cercare la riga che comincia con <body che non è altro che l'inizio della parte visibile del blog. Subito sotto a questa riga si incolla il codice seguente:

<!-- Pagina di benvenuto - Inizio -->
<b:if cond='data:blog.url == data:blog.homepageUrl'><style type='text/css'>
body {margin:0; padding:0; overflow:hidden;}
.benvenuto, #navbar-iframe, .navbar {display:none;}
.Nascosto {z-index:-100;}
#Landing {z-index:5000;}
#Landing {text-align:center; background:#191919; /* Colore di background */
position:absolute;
width:100%; height:100%; overflow-x:hidden; }
p.Accedere a { font-size: 16px; /* Dimensione dei caratteri del bottone */
font-style: italic; font-weight: bold; text-decoration: none; color: #1C1C1C; /* Colore del testo del bottone */
background: #CCCCCC; /* Colore di sfondo del bottone */
padding: 6px; border: 1px solid #2E2E2E; /* Colore del bordo del bottone */
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
p.Accedere a:hover {position:relative; top:1px; left:1px;}
</style>
<div id='Landing'> <div style='margin-top:200px;'>
<!-- Contenuto pagina introduzione inizio -->
<iframe width="840" height="510" src="https://www.youtube.com/embed/i-vJC9hbLFk?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1" frameborder="0"></iframe>
<p class='Accedere'>&lt;a href=&quot;javascript:void(0);&quot; onClick=&quot;document.getElementById(&#39;Contenitore&#39;).className = &#39;AdIntro&#39;, document.getElementById(&#39;Landing&#39;).className = &#39;benvenuto&#39;, document.getElementById(&#39;AudioInBack&#39;).innerHTML = &#39;&#39;, document.body.style.overflow=&#39;auto&#39; &quot;&gt;Accedi al blog&lt;/a&gt;</p>
<!-- Contenuto pagina introduzione fine -->
</div> </div> </b:if> <span class='Nascosto' id='Contenitore'/>
<!-- Pagina di benvenuto - Fine -->

Si salva il modello. Le personalizzazioni più rilevanti sono le seguenti:
  1. La riga evidenziata di giallo impone che questa pagina di benvenuto venga vista solo in homepage. Se si vuole mostrare in un'altra pagina allora va sostituita con un altro dei tag condizionali
  2. Accanto ai codici dei colori e alla dimensione dei caratteri ci sono dei commenti che mostrano a che elemento si riferiscono così come per lo stile dei bordi.
  3. Il tag border-radius: 5px; serve per dare un arrotondamento al pulsante.
  4. Il testo del bottone Accedi al blog può essere sostituito da un altro
  5. Il tag margin-top:200px configura la distanza del video dalla parte alta del layout e può essere adattato alle nostre esigenze
  6. La regola .navbar {display:none;} serve per non mostrare la Navbar
Un discorso a parte lo merita il codice dell'iframe del video di Youtube che è evidenziato di verde. Tale codice è formato dalle dimensioni di larghezza e altezza e dall'ID del video che è la stringa alfanumerica che si trova dopo /embed/ nel Codice da incorporare sotto Condividi o che può anche essere ricavato dall'indirizzo della pagina del video. All'ID del video è stata aggiunta la stringa

?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1

che serve oltre che per l'autoplay anche per non mostrare i video suggeriti quando termina il video, per non mostrare i controlli del player e per non mostrare il titolo del video. I più esperti di voi potranno personalizzare questa stringa con le istruzioni di Youtube IFrame Player API.

Oltre al video si possono aggiungere anche altri contenuti. Per esempio aggiungendo questo codice

<div style='position:fixed;top:120px;right:160px;'><a href='#' target='_blank'><font color='#4bacc6' size='4'><strong>Installa questa pagina di presentazione</strong></font></a></div>

prima di <!-- Contenuto pagina introduzione fine --> ho inserito il link a questa pagina web per le istruzioni sulla realizzazione di questa pagina di benvenuto con video in autoplay.


13 commenti :

  1. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. Non te lo so dire purtroppo. Può darsi che il tuo modello non sia compatibile con questa personalizzazione oppure che tu abbia incollato male il codice e che quindi non funzioni il bottone :(
      @#

      Elimina
  2. Ciao ernesto. Sono riuscito a impostare il video in autoplay. Tuttavia una volta entrato sul blog cliccando su accedi al blog non posso scorrere tra i post perché nkn c'è la barra di scorrimento. Puoi dirmi come risolvere? Grazie e cpmplimenti per l'ottima guida!

    RispondiElimina
  3. Leggi il punto 6).
    Per visualizzare la Navata devi eliminare quella riga di codice
    @#

    RispondiElimina
  4. Navbar non Navata. Il correttore automatico 😊
    @#

    RispondiElimina
    Risposte
    1. Buondì. Ho provato a rimuovere la riga ma non funziona più il pulsante. Praticamente mi resta sempre sulla pagina di benvenuto.

      Elimina
    2. Ti ho risposto dal cellulare e quindi non potevo darti spiegazioni molto dettagliate. Al posto di

      .benvenuto, #navbar-iframe, .navbar {display:none;}

      metti

      .benvenuto {display:none;}

      oppure

      .benvenuto, .navbar {display:none;}

      Prova all'inizio però la prima soluzione
      @#


      Elimina
    3. Provate entrambe le soluzioni ma non funzionano ugualmente...

      Elimina
    4. Ho capito adesso cosa intendi. Non si vede il bottone Accedi al blog perché è troppo in basso. Si può diminuire la risoluzione della pagina con Ctrl e la rotazione del mouse all'indietro. Per fare in modo che il lettore possa farlo senza questa operazione puoi provare a diminuire le dimensioni del video da 840x510 a 560x315

      @#

      Elimina
    5. no no aspetta. la pagina di benvenuto è correttamente impostata e il tasto accedi al blog (che io ho rinominato) funziona regolarmente. Una volta che ci clicco sopra, mi porta alla pagina dei post che non posso scorrere perché non c'è la barra di scorrimento sulla destra. Sulle altre pagine del blog compare regolarmente ma in quella che ho modificato per inserire il video in autoplay non compare.

      Elimina
    6. Non forse intendi la barra di scorrimento laterale per scorrere la pagina.

      Elimina
    7. Il tag della barra laterale è scrollbar è non c'è nessun riferimento nel codice. Ci dovrebbe essere uno scroolbar { display:none;} per nasconderla. Non so come risolvere, mi spiace 😐

      Elimina
    8. Questo commento è stato eliminato dall'autore.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy