Come far apparire una finestra jquery per riprodurre i video di YouTube?

Question

Ho bisogno che questo video venga riprodotto automaticamente. Sarebbe bello, questo codice può riprodurre video da altre fonti come yahoo, ecc. È anche possibile usare HTML5, invece di jQuery?

Answer 1

La funzione o un plugin si usa per visualizzare la finestra pop-up sarà probabilmente diverso da quello che si utilizza per visualizzare il video. In questo esempio ho utilizzato il Overlay Plugin from jQuery Tools per visualizzare il modale, quindi utilizzato swfobject per visualizzare YouTube Flash Player. In alternativa, è possibile utilizzare un HTML5 video player with Flash fallback per visualizzare il video, ma sarà comunque necessario per visualizzare prima il proprio modal.

<a href="http://www.youtube.com/v/2cxqZiWyW3g&hl=en_US&fs=1&autoplay=1" 
    class="video-link">Video 1</a> 
<a href="http://www.youtube.com/v/607RMNoJfl4&hl=en_US&fs=1&autoplay=1" 
    class="video-link">Video 2</a> 

<div class="modal" id="video-modal"> 
    <div id="video-container" style="width: 425px; height: 344px;"></div> 
</div> 

<script language="javascript" type="text/javascript"> 

    $(function() { 
     var videoModal = $('#video-modal').overlay({ 
      expose: { 
       color: 'black', 
       loadSpeed: 200, 
       opacity: 0.85 
      }, 
      closeOnClick: true, 
      api: true 
     }); 

     $('.video-link').click(function() { 
      videoModal.load(); 

      var videoUrl = $(this).attr('href'); 
      var flashvars = {}; 
      var params = { 
       allowFullScreen: "true", 
       allowscriptaccess: "always" 
      }; 
      var attributes = {}; 

      swfobject.embedSWF(videoUrl, 'video-container', '425', '344', '9.0.0', '', flashvars, params, attributes); 

      return false; 
     }); 
    }); 

</script> 

Answer 2

Guarda la demo per FancyBox e ColorBox

Answer 3

PrettyPhoto è una libreria JavaScript puro che consente di visualizzare immagini e video in un lightbox.

Per gli scopi, è necessario taggare il collegamento YouTube con uno speciale attributo "rel", il video verrà quindi aperto in una finestra popup.

Answer 4

SimpleModal è un ottimo plugin jQuery in quanto offre molte opzioni differenti, un essere la visualizzazione di contenuti esterni:

// Display an external page using an iframe 
var src = "http://365.ericmmartin.com/"; 
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', { 
    closeHTML:"", 
    containerCss:{ 
     backgroundColor:"#fff", 
     borderColor:"#fff", 
     height:450, 
     padding:0, 
     width:830 
    }, 
    overlayClose:true 
}); 

Bill Beckelman ha un grande serie di tutorial su integrazione SimpleModal a Asp.Net come finestra di dialogo di conferma personalizzata. Dimostra come creare ottime funzionalità lato client e come inviare messaggi al server. mi ha davvero aiutato a capire meglio come integrare jQuery con ASP.Net.