<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 ----------> <div class="container"> <!-- Button trigger modal --> <a class="btn icon-btn btn-danger" data-toggle="modal" href="#myModal"><span class="glyphicon btn-glyphicon glyphicon-play img-circle text-danger"></span>WATCH THE REEL</a> <!--<button type="button text-center" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button>--> </div> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <div class="video-container"> <iframe width="640" height="360" src="https://www.youtube.com/embed/SyiwWRMoXXA" frameborder="0" allowfullscreen></iframe> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>

.btn-glyphicon { padding:2.5rem; background:#ffffff; margin-right:1.975rem; } .icon-btn { padding: 1rem 2rem 3rem 5rem; border-radius:7.8375rem;} .btn { font-family: "Lato"; font-size: 3.975rem; font-weight: 700; text-transform: uppercase; padding: 3rem 5rem 3rem 3rem; } .container { height: 28rem; width: 100%; position: fixed; background-color: #f7f7f7; bottom: 0; } .container a { position: absolute; top: 50%; left: 50%; margin-top: -23px; margin-left: -100px; } .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } @media (min-width: 768px) { .modal-dialog { width: 745px; margin: 10px auto; } }