Help with Bootstrap

Question

I have a modal that appears at the end of the video, as I can call the bootstrap modal when the video ends?

normal javascript alert works, but bootstrap doesn’t :s

// 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "http://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player) after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'ecccag3L-yw',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // The API will call this function when the video player is ready.
      function onPlayerReady(event) { /* do nothing yet */ }

      // The API calls this function when the player's state changes.

      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
                // insert appropriate modal (or whatever) below 
            alert('teste');
                    
        }
      }

 <div id="player"></div>

Answer 1

Call the modal so:

$('#myModal').modal('show');

API

Answer 2

Modal Bootstrap Events can be triggered via Jquery;

$('#idModal').modal('toggle');
$('#idModal').modal('show');
$('#idModal').modal('hide');

In your case I believe it would look like this:

      function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        $('#idSeuModal).modal('show');

    }

And the Modal Html must be defined as follows:

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
         <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Documentation Bootstrap Modal: http://getbootstrap.com/javascript/#modals