Bootstrap modal HTML5 Video

by philphil

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<body class="page page-index">
  <!-- Button to trigger modal -->
  <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
  <a href="#myModal2" role="button" class="btn" data-toggle="modal" 
     data-src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">Launch demo modal</a>


  <!-- Modal -->
  <div id="myModal" class="modal hide fade" style="overflow:hidden" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header" style="padding:0px 0px;">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    </div>
    <div class="modal-body" style="max-height:none">
      <video controls autoplay loop height="480" width="480" poster="http://placehold.it/480x480">
        <source id="myVideo" src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4" />
      </video>
    </div>
  </div>

  <div id="myModal2" class="modal hide fade" style="overflow:hidden" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header" style="padding:0px 0px;">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    </div>
    <div class="modal-body" style="max-height:none">
      <video id='modal-video' controls autoplay loop height="480" width="480" poster="http://placehold.it/480x480">
        <source id="myVideo2" src="//placehold.it/1200x700/222?text=..." type="video/mp4" />
      </video>
    </div>
  </div>




</body>

JavaScript

jQuery(document).ready(function(e) {

  $('#myModal2').on('show.bs.modal', function(e) {
   
    $('#myVideo2').attr("src", $(e.relatedTarget).data("src"));
   
    $('#modal-video').get(0).load();
     //$('#'+videoID).attr('poster', newposter); //Change video poster
    $('#modal-video').get(0).play();
      
   var test = $(e.relatedTarget).data('src');
   
   alert(JSON.stringify(test));
   
   
  });

});