<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="text-center"> <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalYT">YouTube Modal</button> <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalVM">Vimeo Modal</button> <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modalGM">Google Maps Modal</button> </div> <!--Modal: Name--> <div class="modal fade" id="modalYT" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <!--Content--> <div class="modal-content"> <!--Body--> <div class="modal-body mb-0 p-0"> <div class="embed-responsive embed-responsive-16by9 z-depth-1-half"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A3PDXmYoF5U" allowfullscreen></iframe> </div> </div> <!--Footer--> <div class="modal-footer justify-content-center"> <span class="mr-4">Spread the word!</span> <a type="button" class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook-f"></i></a> <!--Twitter--> <a type="button" class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a> <!--Google +--> <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus-g"></i></a> <!--Linkedin--> <a type="button" class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a> <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button> </div> </div> <!--/.Content--> </div> </div> <!--Modal: Name--> <!--Modal: Name--> <div class="modal fade" id="modalVM" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <!--Content--> <div class="modal-content"> <!--Body--> <div class="modal-body mb-0 p-0"> <div class="embed-responsive embed-responsive-16by9 z-depth-1-half"> <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/115098447" allowfullscreen></iframe> </div> </div> <!--Footer--> <div class="modal-footer justify-content-center"> <span class="mr-4">Spread the word!</span> <a type="button" class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook-f"></i></a> <!--Twitter--> <a type="button" class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a> <!--Google +--> <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus-g"></i></a> <!--Linkedin--> <a type="button" class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a> <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button> </div> </div> <!--/.Content--> </div> </div> <!--Modal: Name--> <!--Modal: Name--> <div class="modal fade" id="modalGM" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <!--Content--> <div class="modal-content"> <!--Body--> <div class="modal-body mb-0 p-0"> <!--Google map--> <div id="map-container-google-2" class="z-depth-1-half map-container" style="height: 500px"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d619.0556797845336!2d77.20770267993417!3d28.632526708103722!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xedc0c41b10c25f55!2sIndior%20Tours%20Pvt%20Ltd!5e0!3m2!1sen!2sin!4v1577722955804!5m2!1sen!2sin" frameborder="0" style="border:0" allowfullscreen></iframe> </div> <!--Google Maps--> </div> <!--Footer--> <div class="modal-footer justify-content-center"> <button type="button" class="btn btn-primary btn-md">Save location <i class="fas fa-map-marker-alt ml-1"></i></button> <button type="button" class="btn btn-outline-primary btn-md" data-dismiss="modal">Close <i class="fas fa-times ml-1"></i></button> </div> </div> <!--/.Content--> </div> </div> <!--Modal: Name-->

.map-container{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } .map-container iframe{ left:0; top:0; height:100%; width:100%; position:absolute; }