Ciao a tutti,

ho inserito in una pagina html un video da youtube che, al click, si apre in "overlay" (ossia tipo un pop-up). Ci sono riuscito seguendo una guida su internet, vi posto il codice:

Codice JavaScript
codice:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" ></script> 
        <script type="text/javascript">      
         $(document).ready(function() {
            $(".apri").click(
               function(){
                  $('#overlay').fadeIn('fast');
                  $('#box').fadeIn('slow');
               }
            );
             
            $(".chiudi").click(
               function(){
                  $('#overlay').fadeOut('fast');
                  $('#box').hide();
               }
            );
             
             //chiusura emergenza
            $("#overlay").click(
               function(){
                  $(this).fadeOut('fast');
                  $('#box').hide();
               }
            );
         });
      </script>
Codice HTML
codice:
<div class="overlay" id="overlay" style="display:none;"></div>
                <div id="box">
                    <iframe width="600" height="400" src="http://www.youtube.com/embed/NEwtc-3LPRg" frameborder="0" allowfullscreen></iframe>
      </div>
Ora veniamo al problema: appena clicco su di un pulsante appare il video in overlay ma, ovviamente, è in pausa. Io ho bisogno che parta già in play e, inoltre, quando chiudo il pop-up vorrei che il video si stoppasse. Come si implementano queste funzionalità?

Attendo un vostro aiuto. Grazie

Marco

EDIT: per farvi capire meglio, vi linko un esempio di ciò che vorrei ottenere. Se cliccate sull'immagine di fianco a "Prodotti Business", sopra Spotify, vedrete ciò che intendo.