How to play multiple video in single Bootstrap Modal Popup

In this tutorial, learn how to play multiple videos in a single bootstrap modal popup instead of creating multiple modal popups on a single page. In the normal scenario, we are creating a modal popup for each video file or any information which wants to display in a modal popup for the same structure. Using JavaScript we can create one single modal popup instead of writing multiple modal popup codes on the same single page.

This is an amazing multiple video play in single modal popup using JavaScript instead of writing, again and again, the same code. It can play multiple videos in one pop-up window also stop playing videos in the background after closing the popup. Using JavaScript learn how to manage multiple popup code for playing multiple videos in Bootstrap modals. You can embed multiple videos on a page and use the same modal window to play all of them Embed Multiple videos into the page with a single call.

To Create a single bootstrap modal popup for multiple time with the same code it takes following steps:-

1. Include the bootstrap modal popup code in the page at once only.
2. Assign the unique id (myModal) and one class name (videopopup) to modal popup.
3. For displaying the video in the popup write the html5 video tag and leave the blank path (src=””).
4. Using the data-target=”.videopopup” and data-src=”img/videos/Aator.mp4″ we can use single modal popup for multiple times.
5. Link the modal popup on which text or action point you want to open popup using button or anchor tag.

HTML

<a href="#!" data-toggle="modal" data-target=".videopopup">
    <img src="img/posters/01.jpg" data-src="img/videos/Belongings.mp4">
</a>
<a data-toggle="modal" data-target=".videopopup">
    <img src="img/posters/02.jpg" data-src="img/videos/Aator.mp4">
</a>

<!-- Modal -->
<div class="modal fade videopopup" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <button type="button" class="close videobtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <div class="modal-body">
            <video id="recap" width="100%" controls controlslist="nodownload" autoplay="">
            <source src="" type="video/mp4">
            <!-- <source src="" type="video/ogg"> -->
            Your browser does not support the video tag.
            </video>
        </div>
    </div>
    </div>
</div>

JavaScript

$( document ).ready(function() {
    $('#myModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var imgposter = button.find("img").attr("src");
        var vidsrc = button.find("img").attr("data-src");

        //$(this).find('video#recap').attr('poster', imgposter);
        $(this).find('video#recap source').attr('src', '');
        $(this).find('video#recap source').attr('src', vidsrc);

        $(this).find('video#recap')[0].load();
    }).on('hidden.bs.modal', function(){
        $(this).find('video')[0].pause();
    });
});

In this tutorial we learn that how to use single bootstrap modal popup for multiple times without writing same code for popup. Below are the example for multiple content need to display in popup. You just need to create one single modal popup and using JavaScript change each popup data (Popup Heading title, Popup paragraph content & add to image or video).

Multiple bootstrap modal popup

HTML

<div class="servicesBox">
  <div class="circleImg"><i class="fa ti-palette" aria-hidden="true"></i></div>
  <h4 class="serviceType">Web Design</h4>
  <a href="#!" data-toggle="modal" data-target="#fsModal"><span>Read More</span></a>
  <div class="serviceDesc">
    <p>As one of the Best Web Design Agency in Mumbai. No Fixed Packages, Competitive Pricing, Professional Web design Solutions.</p>
    <h2>Our Services</h2>
    <ul class="features_list">
      <li>Web Design</li>
      <li>HTML to PSD</li>
    </ul>
  </div>
</div>

CSS

.serviceDesc {
  display: none;
}

JavaScript

<script type="text/javascript">
  $(document).ready(function(){
    $('#fsModal').on('show.bs.modal', function (event) {
        var fsClick = $(event.relatedTarget); // Button that triggered the modal
        //var recipient = button.data('whatever') // Extract info from data-* attributes
        var fsTitle = fsClick.siblings('.serviceType').html();
        var fsContent = fsClick.siblings('.serviceDesc').html();
        var fsModal = $(this);
        fsModal.find('.modal-title').text('').text(fsTitle);
        fsModal.find('.modal-body').html('').html(fsContent);
    });
  });
</script>

Modal Popup Code

<div class="modal fade fsModal" id="fsModal" tabindex="-1" role="dialog" aria-labelledby="fsModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="fsModalLabel"></h4>
      </div>
      <div class="modal-body"></div>
    </div>
  </div>
</div>

Learn how to opening multiple modal boxes on one page just using only single modal box instead of multi times written same modal box code triggered by a different – different link click, when clicking on a link, it can distinguish which modal popup to load by data-target=”” and as a result the related modal popup display. Use these plugins to create multiple modal popup with signal modal box.