<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>
<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>
<div class="modal fade" id="modalYT" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<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>
<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>
<a type="button" class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a>
<a type="button" class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus-g"></i></a>
