Problema player YouTube incorporato in un DIV

Buonasera!

In una pagina web, ho creato delle miniature dove vi sono le immagini dei video. Cliccando con il mouse su ogni miniatura, si apre il DIV contenente il codice EMBED del video di YouTube.

Il DIV si apre e chiude correttamente, solo che quando chiudo il DIV con la X, la riproduzione del video continua!

Ho già capito il problema, e dipende dal fatto che il DIV viene solo nascosto e non riaggiornato, ma come dovrei fare per chiudere ogni volta il video quando il DIV viene chiuso?

DIV del video:

<div id="video"><span style='cursor:pointer;' onClick='document.getElementById("video").style.display="none";'><img align="right" src="close.png"></span><br><iframe width="640" height="360" src="//www.youtube.com/..."></iframe></div>

Richiamo del DIV:

<span style='cursor:pointer; text-decoration:underline' onClick='document.getElementById("video").style.display="inline";'><img src="thumb.jpg"></span>

Codice CSS del DIV:

#video{
display:none;}

Grazie a tutti!

[naviland]

Nascondi solo il div ma questo non ha effetto con il player che si trova nell'iframe, puoi provare a cancellare il div e a ricrearlo con i nuovi parametri visto che il codice è sempre lo stesso e quello che varia è solo il player lo puoi fare facilmente

Grazie per la risposta!
Il problema è: come faccio a ricrearlo?

Se il mio div di partenza è "video" come lo inserisco di nuovo con Javascript?

[karl94]

Usi il DOM, ad esempio i metodi removeChild e appendChild, chiamati sull'elemento padre e passando come parametro l'oggetto rappresentante l'elemento in questione.

Ho usato questo codice:

<script type="text/javascript">
function cancella() {
  $('#video').remove();
}
</script>

Richiamando la funzione all'immagine della X, ma non funziona.
Ho aperto il visualizzatore del browser e mi dice che $ non è definito...
Per quale ragione?
Devo dichiararlo da qualche parte?

---

Credo di aver capito... è legato al file .js che manca?

[karl94]

La funzione dollaro non è una funzione definita dal JavaScript o dal DOM, è sposso definita da grosse e pesanti framework JavaScript come JQuery. Nel tuo caso ti sconsiglio di caricare un intero framework come questo per compiere una azione così banale.