Smart Learning Tutorials

Online Tutorials Library

JavaScript

Play Video in Modal Popup

admin

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

Play Video in Modal Popup
How to play YouTube video in popup window

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

  1. Include the CSS and Js file of bootstrap.
  2. Give the unique id name of modal popup and write JavaScript for on load show modal popup at to bottom of page.
  3. Copy the enter popup code and paste inside the page bottom just above the Js files.

HTML

<!-- 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>

JavaScript

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

Example

<!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="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 popup 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 video 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.

You May Also Like

jQuery Show Hide Elements Using Select Box

admin

Show and hide DIV’s based on radio button selection in jQuery

admin

HTML5 Video Gallery | Using JavaScript to create an video gallery

admin