<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"> <div class="row"> <div class="col-md-12 text-center"> <br/> <br/> <br/> <a href="#" class="btn btn-default btn-lg btn-success" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/sGbxmsDFVnE">VIEW VIDEO</a> <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <div> <iframe width="100%" height="350" src="" allowfullscreen></iframe> </div> </div> </div> </div> </div> </div> </div> </div>

/***** MODAL PROPERTIES *****/ .modal-content { -webkit-box-shadow: none; box-shadow: none; background:transparent; border:none; outline:none; } .modal-content iframe { border:none; padding:0; margin:0; } .close { font-size: 80px; margin:-20px 0 0 0; } /***** MEDIA QUERIES *****/ @media only screen and (max-width: 641px) { /***** MODAL PROPERTIES *****/ .modal-body { height:100px; padding:0; margin: 0; } .modal-content { padding:0; margin: 0; } .modal-dialog { position: relative; width: auto; margin: 15px; } .close { margin:-12px 0 0 0; } } @media only screen and (min-width: 768px) { /***** MODAL PROPERTIES *****/ .close { font-size: 30px; color: white; margin:30px -43px -20px 100px; } }

autoPlayYouTubeModal(); //FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG function autoPlayYouTubeModal() { var trigger = $("body").find('[data-toggle="modal"]'); trigger.click(function () { var theModal = $(this).data("target"), videoSRC = $(this).attr("data-theVideo"), videoSRCauto = videoSRC + "?autoplay=1"; $(theModal + ' iframe').attr('src', videoSRCauto); $(theModal + ' button.close').click(function () { $(theModal + ' iframe').attr('src', videoSRC); }); $('.modal').click(function () { $(theModal + ' iframe').attr('src', videoSRC); }); }); }