Play Video In Modal Popup

Play Youtube video or local video in Bootstrap Modal Popup. Create a bootstrap modal popup to play a youtube video or local video.

Play local video in modal popup Play youtube video in modal popup

To Play Video in bootstrap modal popup which takes following steps:-

Include the css and js file of bootstrap.
Give the unique id name of modal popup and write javscript for on load show modal popup at to bottom of page.
Copy the enter popup code and paste inside the page bottom just above the js files.

Html
JavaScript
Example

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <video id="" width="100%" controls poster="video/thumb.jpg">
          <source src="video/Login_via_Lynda_dot_com.mp4" type="video/mp4">
          <source src="video/Login_via_Lynda_dot_com.ogg" type="video/ogg">
          Your browser does not support the video tag.
        </video>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
      $('#exampleModal').modal({
          show: false
      }).on('hidden.bs.modal', function(){
          $(this).find('video')[0].pause();
      });
    });
</script>

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap.min.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>On page load show Modal Popup !</h1>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <video id="" width="100%" controls poster="video/thumb.jpg">
              <source src="video/Login_via_Lynda_dot_com.mp4" type="video/mp4">
              <source src="video/Login_via_Lynda_dot_com.ogg" type="video/ogg">
              Your browser does not support the video tag.
            </video>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://khaalipaper.com/js/jquery-3.2.1.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $('#exampleModal').modal({
              show: false
          }).on('hidden.bs.modal', function(){
              $(this).find('video')[0].pause();
          });
        });
    </script>
  </body>
</html>

In this tutorial we learn that how to create bootstrap modal poup on page load using bootstrap css and js file, have to include to initialization javascript code for a default popup open on page load.

Play youtube video in modal popup

Html

  <a href="#"  data-toggle="modal" data-target="#youtubeVideo">Youtube Video in Popup</a>

  <div class="modal-body">
      <iframe width="100%" height="315" src="https://www.youtube.com/embed/W26JgQW7Uss" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>

Javascript

<script>
  $(document).ready(function() {
    $('#youtubeVideo').on('hidden.bs.modal', function() {
      var $this = $(this).find('iframe'),
        tempSrc = $this.attr('src');
      $this.attr('src', "");
      $this.attr('src', tempSrc);
    });
  });
</script>

Stop vido after closing the modal popup

<script>
  $('#html5Video').on('hidden.bs.modal', function() {
    var html5Video = document.getElementById("htmlVideo");
    if (html5Video != null) {
      html5Video.pause();
      html5Video.currentTime = 0;
    }
  });
</script>

Play any video in popup

You can customize this code further as per your requirement.