Come Rendere Visibile un elemento Nascosto dopo la Visione di un Video

Oggi ti faremo vedere un modo semplice per nascondere un elemento e farlo visualizzare all’utente solamente dopo aver visto un video incorporato di youtube.

Grazie all’iFrame Player API è possibile controllare il player di YouTube tramite JavaScript gestendo vari eventi come ad esempio mettere in coda i video da riprodurre, mettere in pausa o interrompere, regolare il volume del player oppure recuperare le informazioni sul video in riproduzione.

Senza soffermarci su tutte le funzioni, in questo articolo parleremo dell’evento “ENDED”, ovvero la fine del video. Creeremo un testo nascosto e una funzione che lo renderà visibile alla fine della riproduzione.

1. Creare un Testo Nascosto

Se stai utilizzando WordPress o un altro CMS puoi andare direttamente sull’editor di testo ed entrare nella modalità “Modifica come HTML”. Se stai facendo delle prove in locale puoi creare un file di test come ad esempio prova.html.

Inserisci un paragrafo nascosto all’interno di un tag div e assegna un display: none e un id.

<div id="testo-nascosto" style="display: none">
  <p>Sono il testo nascosto</p>
</div>

2. Inserire il Video Embed di Youtube

Vai su youtube e cerca il video da inserire sulla tua pagina. Clicca successivamente sul pulsante Condividi.

A questo punto clicca su Incorpora.

Prima di copiare il codice puoi spuntare alcune opzioni:

• Inizia da – ti permette di inserire il minuto e il secondo di inizio riproduzione.
• Mostra i controlli del player – se deselezionato eliminerà i controlli del player. Opzione consigliata se vuoi che l’utente visualizzi l’intero video senza la possibilità di andare avanti.
• Abilita modalità di privacy avanzata – se selezionata non verranno memorizzati le informazioni del visitatore finchè non riproduce il video.

Dopo aver copiato il codice puoi incollarlo all’interno della tua pagina.

3. Implementare la Funzione Javascript

Prima di continuare dovrai aggiungere la stringa ?enablejsapi=1 all’url dell’attributo src e assegnare un id a piacere all’iframe. In questo esempio abbiamo assegnato “video-player”.

<figure>
<iframe id="video-player" src="https://www.youtube.com/embed/QRRnoCHC8vg?enablejsapi=1"
allowfullscreen="" width="560" height="315"></iframe>
</figure>

Ora possiamo implementare il codice Javascript che si occuperà di rendere visibile il paragrafo nascosto alla fine del video.

<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScript = document.getElementsByTagName('script')[0];
firstScript.parentNode.insertBefore(tag, firstScript);
function onYouTubeIframeAPIReady() {
 //sostituire la stringa contenente l'id con quello che avete scelto.
 //in questo caso "video-player".
 new YT.Player('video-player', {
  events: {
   'onStateChange': function(evt) {
    if (evt.data === YT.PlayerState.ENDED) {
     //Qui va inserito il codice da eseguire.
     //In questo caso abbiamo inserito una funzione javascript che
     //rende visibile il testo nascosto con l'id "testo-nascosto".
     document.getElementById("testo-nascosto").style.display = "static"; 
    }
   }
  }
 });
}
</script>

Conclusioni

Il codice completo sarà il seguente:

<!-- paragrafo nascosto -->
<div id="testo-nascosto" style="display: none">
  <p>Sono il testo nascosto</p>
</div>

<!-- iframe youtube -->
<figure>
<iframe id="video-player" src="https://www.youtube.com/embed/QRRnoCHC8vg?enablejsapi=1"
allowfullscreen="" width="560" height="315"></iframe>
</figure>

<!-- codice javascript -->
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScript = document.getElementsByTagName('script')[0];
firstScript.parentNode.insertBefore(tag, firstScript);
function onYouTubeIframeAPIReady() {
 //sostituire la stringa contenente l'id con quello che avete scelto
 new YT.Player('video-player', {
  events: {
   'onStateChange': function(evt) {
    if (evt.data === YT.PlayerState.ENDED) {
     //Qui va inserito il codice da eseguire
     document.getElementById("testo-nascosto").style.display = "block";
    }
   }
  }
 });
}
</script>

Per tutte le altre funzioni implementabili grazie all’iFrame Player API di Youtube ti lascio al sito ufficiale.