"Sanjaikrishna"
Bootstrap 3.3.0 Snippet by SandhiyaGJ

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html lang="it_IT"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="page"> <button type="button" class="modalButton" data-toggle="modal" data-src="https://player.vimeo.com/video/87701971" data-width="500" data-height="281" data-target="#myModal" data-video-fullscreen="">Vimeo</button> <button type="button" class="modalButton" data-toggle="modal" data-src="https://www.youtube.com/embed/mWRsgZuwf_8" data-width="640" data-height="360" data-target="#myModal" data-video-fullscreen="">Youtube</button> <button type="button" class="modalButton" data-toggle="modal" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d91737.51273778046!2d12.566428499999994!3d44.06689465000003!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132cc3a48fa6592b%3A0xc1f284db17f1449d!2sRimini+RN!5e0!3m2!1sit!2sit!4v1427492339750" data-width="600" data-height="450" data-target="#myModal">Google maps</button> </div> </div> </div> </div> <footer> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div class="close-button"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" frameborder="0"></iframe> </div> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> </footer> </body> </html>
@import "compass/css3"; .page { padding: 15px 0px 0px; } .modalButton { display: block; margin: 15px auto; padding: 5px 15px; } .modal-dialog { font-size:20px; } .close-button { overflow: hidden; } .button.close { font-size: 30px; line-height: 30px; padding: 7px 4px 7px 13px; } span { display: block; outline: none; } .modal-content { box-shadow: none; background-color: transparent; border: 0; } iframe { display: block; margin: 0 auto; }
( function($) { function iframeModalOpen(){ // impostiamo gli attributi da aggiungere all'iframe es: data-src andrà ad impostare l'url dell'iframe $('.modalButton').on('click', function(e) { var src = $(this).attr('data-src'); var width = $(this).attr('data-width') || 640; // larghezza dell'iframe se non impostato usa 640 var height = $(this).attr('data-height') || 360; // altezza dell'iframe se non impostato usa 360 var allowfullscreen = $(this).attr('data-video-fullscreen'); // impostiamo sul bottone l'attributo allowfullscreen se è un video per permettere di passare alla modalità tutto schermo // stampiamo i nostri dati nell'iframe $("#myModal iframe").attr({ 'src': src, 'height': height, 'width': width, 'allowfullscreen':'' }); }); // se si chiude la modale resettiamo i dati dell'iframe per impedire ad un video di continuare a riprodursi anche quando la modale è chiusa $('#myModal').on('hidden.bs.modal', function(){ $(this).find('iframe').html(""); $(this).find('iframe').attr("src", ""); }); } $(document).ready(function(){ iframeModalOpen(); }); } ) ( jQuery );

Related: See More


Questions / Comments: