Help with popover Bootstrap

2

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

normal javascript alert works, but bootstrap does not: 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>
    
asked by anonymous 21.07.2015 / 14:36

2 answers

0

Modal Bootstrap Events can be triggered via Jquery;

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

In your case, I think it would look like this:

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

    }

And the Modal Html should 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>

Bootstrap Modal documentation: link

    
21.07.2015 / 14:51
0

Call the modal like this:

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

API

    
21.07.2015 / 14:50