La latteria di Bazagubigogi

il sito di Yari Piras, detto Arboricum Sandorsi

 

Come incorporare più playlist di YouTube in un unico player sul proprio sito

 

1. Modello base

 

Incorporiamo una prima playlist:

 

<a name="main" id="main"><iframe width="560" height="315" src="https://www.youtube.com/embed/0n7ILu5vipw" frameborder="0" allowfullscreen></iframe></a>

 

Dopodiché immettiamo l'elenco delle playlist che vogliamo si alternino a seguito di un click nel player appena creato:

 

//una prima playlist (la stessa già nel player)

 

<a href="#main" onclick="gal1()">Playlist1</a>

 

<script>

function gal1() {

document.getElementById("main").innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/0n7ILu5vipw" frameborder="0" allowfullscreen></iframe>';

}

</script>

 

//una seconda playlist

 

<a href="#main" onclick="gal2()">Playlist2</a>

 

<script>

function gal2() {

document.getElementById("main").innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/vvL7GXKfnUI" frameborder="0" allowfullscreen></iframe>';

}

</script>

 

//n playlist

 

<a href="#main" onclick="galn()">Playlistn</a>

 

<script>

function galn() {

document.getElementById("main").innerHTML = 'codice playlistn';

}

</script>

 

ovvero

 

<a href="#main" onclick="gal1()">Playlist1</a>

<a href="#main" onclick="gal2()">Playlist2</a>

<a href="#main" onclick="galn()">Playlistn</a>

 

<script>

function gal1() {

document.getElementById("main").innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/0n7ILu5vipw" frameborder="0" allowfullscreen></iframe>';

}

</script>

<script>

function gal2() {

document.getElementById("main").innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/vvL7GXKfnUI" frameborder="0" allowfullscreen></iframe>';

}

</script>

<script>

function galn() {

document.getElementById("main").innerHTML = 'codice playlistn';

}

</script>

2. Modello (un po' più) avanzato

 

Inseriamo un'ancora in alto:

 

<a name="top"></a>

 

Creiamo due finestre di testo (un titolo e un sottotitolo)

 

<h2 style="text-align:center;"><b id="ttl">L'arrivo del treno alla stazione di Locate di Triulzi</b></h2>

<p style="text-align:center;" id="ttl1">14/04/2017 - vista da 60mt circa di altezza</p>

 

Incorporiamo una prima playlist:

 

<a id="main"><iframe width="560" height="315" src="https://www.youtube.com/embed/0n7ILu5vipw" frameborder="0" allowfullscreen></iframe></a>

 

Dopodiché immettiamo l'elenco delle playlist che vogliamo si alternino a seguito di un click nel player appena creato:

 

//una prima playlist (la stessa già nel player)

 

<a href="#top" onclick="gal1()" style="color:blue;"><b>L'arrivo del treno alla stazione di Locate di Triulzi</b></a>

 

<script>

function gal1() {

document.getElementById("main").innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/0n7ILu5vipw" frameborder="0" allowfullscreen></iframe>';

document.getElementById("ttl").innerHTML = "L'arrivo del treno alla stazione di Locate di Triulzi";

document.getElementById("ttl1").innerHTML = '14/04/2017 - vista da 60mt circa di altezza';

}

</script>

 

//una seconda playlist

 

<a href="#top" onclick="gal2()" style="color:blue;"><b>Drone Hubsan H501s - Hovering test </b></a>

 

<script>

function gal2() {

document.getElementById("main").innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/vvL7GXKfnUI" frameborder="0" allowfullscreen></iframe>';

document.getElementById("ttl").innerHTML = 'Drone Hubsan H501s - Hovering test';

document.getElementById("ttl1").innerHTML = '04/2017 - test per verificare la precisione del posizionamento';

}

</script>

 

 

Vedi il risultato qui e qui