Diciamo che esistono diverse pratiche più o meno fruibili per avere un video in u popop, con bootstrap abbiamo la possibilità di integrare Jquery per il nostro scopo, vediamo quindi cosa ci serve.
Innanzi tutto chiamiamo la nostra libreria bootstrap sia javascript che quella di style css e scriviamola ad esempio dentro i tag HEAD della nostra pagina o meglio alla fine del tag BODY in questa maniera:
<link rel="stylesheet" href="bootstrap/4.5.0/css/bootstrap.min.css">
<script src="bootstrap/4.5.0/js/bootstrap.min.js"></script>
... si dovrà eventualmente utilizzare l'ultima libreria rilasciata in questo caso noi utilizziamo la versione 4.5 di bootstrap.
Successivamente dobbiamo richiamare la libreria Jquery
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
... anche qui utilizzate eventualmente l'ultima versione disponibile.
In seguito impostate un pulsante che servirà per aprire il popup modal con il video richiamato al suo interno
<a href="#mioModalVideo" class="btn btn-primary btn-lg" data-toggle="modal">Apri modal Video</a>
..impostando l'attributo href su #mioModalVideo in modo da poter richiamare in maniera univoca il modal presente nella pagina, questo perchè potrebbero essere presenti altri video con altrettanti id univoci da richiamare con i relativi pulsanti.
Adesso passiamo a inserire il nostro modal in questa maniera:
<div id="mioModalVideo" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Mio Video</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe id="unBelVideo" class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/WmVLcj-XKnM" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
Come vedete, il valore ID del pulsante è presente sul tag div del modal:
<div id="mioModalVideo" class="modal fade">
Impostate poi un titolo del tag <h5> e successivamente incorporate il link del video nell' attributo scr="https://www.youtube.com/embed/WmVLcj-XKnM" dell'iframe di incorporamento in questo caso del video di Youtube ma potete inserire qualsiasi altro tag com ad esempio <video></video>.
In un'altro articolo vedremo come ottenere il link You tube per l'incorporamento.
Bene ora che abbiamo impostato i parametri html per la visualizzazione del modal con il suo video all'interno, passiamo a spiegare come agire sul pulsante in maniera da richiamare il modal.
Come facciamo?
Utilizzando appunto la libreria Jquery che abbiamo importato prima, in maniera tale da aver a disposizione tutti gli elementi per poter agire sul vari ID di richiamo dei tag presenti nella pagina.
Come abbiamo visto prima è stato impostato un pulsante con un id univoco #mioModalVideo in modo da poter richiamare il modal avente lo stesso identificativo <div id="mioModalVideo" class="modal fade">.
Ecco ilcodice necessario per aprire il modal e visualizzare il video:
$(document).ready(function(){
var url = $("#unBelVideo").attr('src');
$("#mioModalVideo").on('hide.bs.modal', function(){
$("#unBelVideo").attr('src', '');
});
$("#mioModalVideo").on('show.bs.modal', function(){
$("#unBelVideo").attr('src', url);
});
});
A cosa serve questo codice javascript?
Il primo parametro è una variabile impostata su urlVideo che identifica l'attributo src dell'iframe dove è presente il link del video identificato per mezzo del suo ID univoco unBelVideo
var urlVideo = $("#unBelVideo").attr('src');
In seguito impostiamo una vista del modal in questo caso su HIDE (non visibile) identificato per mezzo del ID #mioModalVideo con all'interno del delle parentesi graffe del selettore unBelVideo impostato con un valore nullo proprio per evitare il richiamo dell'url video:
$("#unBelVideo").attr('src', '');
Subito dopo inseriamo il selettore per la vista del modal impostato su SHOW (visibile) in questa maniera quando clicchiamo sul pulsante verrà visualizzato il modal con il video richiamato all'interno delle parentesi graffe tramite la variabile impostata su urlVideo che richiama il link del video inserito nell'attributo src dell'iframe:
$("#mioModalVideo").on('show.bs.modal', function(){
$("#unBelVideo").attr('src', urlVideo);
});