"Youtube API in Modal"
Bootstrap 3.3.0 Snippet by martinfrancisco

<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-sm-12"> <div class="jumbotron text-center"> <a href='#myModal' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#playerModal'> Youtube Video </a> </div> <div class="modal fade" id='playerModal' role='dialog' tabindex='-1'> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button class="close" aria-label='Close' data-dismiss='modal', type='button'> <span aria-hidden='true'>×</span></button> <h4 class="modal-title">Video title</h4> </div> <div class="modal-body"> <div class="embed-responsive embed-responsive-16by9"> <div id="player" class="embed-responsive-item"></div> </div> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss='modal' type='button'> Close </button> </div> </div> </div> </div> </div> </div> </div>
// Youtube API Functions (https://developers.google.com/youtube/iframe_api_reference) // ============================================= var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); //### Variables var player; var playerModal = $('#playerModal'); //### Youtube API function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'L2Ew6JzfZC8' }); } //### Modal Controls (http://getbootstrap.com/javascript/#modals) // Modal when show, begin to play video playerModal.on('show.bs.modal', function (e) { player.playVideo(); }); // Modal when hidden, pause or stop playing video playerModal.on('hidden.bs.modal', function (e) { player.pauseVideo(); //player.stopVideo(); });

Related: See More


Questions / Comments: