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