Incorporare i video di youtube nelle modali di bootstrap è molto semplice. L'unico problema è che le modali quando vengono chiuse rimangono in pagina con la proprietà display: none; quindi continueremo a sentire l'audio del video senza la possibilità di spegnerlo. Molto fastidioso. 

Senza andare a scomodare le API di youtube suggerisco un modo veloce in jquery per rimuovere il video alla chiusura della modale per poi ritrovarselo alla successive riapertura:

 

  $(function(){
        var player = $( "#productVideo" ); //id della modale
        var url = player.find('iframe').attr('src');
 
        player.on('hidden.bs.modal', function () {
            $('.modal-body iframe').attr('src', '');
        });
        player.on('shown.bs.modal', function () {
            $('.modal-body iframe').attr('src', url);
        })
 
    });

 

Il sistema è testato fino a ie8 compreso ed è utilizzabile con tutte le piattaforme che permettono di incorporare video tramite iframe (youtube, vimeo..)

RIFERIMENTI

Proprietà delle modali di bootsrap

 

 


blog comments powered by Disqus