Bootstrap Snippet Youtube API in Modal using HTML Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 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();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Youtube API in Modal"
Bootstrap 3.3.0 Snippet by coskuntekin

Related: See More

Questions / Comments:

"Youtube API in Modal" Bootstrap 3.3.0 Snippet by coskuntekin

Related: See More

Questions / Comments:

"Youtube API in Modal"
Bootstrap 3.3.0 Snippet by coskuntekin