Auto Launch Multi Modal

Launch a Bootstrap 3 modal with whatever video or image you wish

by Rynne Cowham

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap-theme.css">
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-itemsource="https://www.youtube.com/embed/loFtozxZG0s">VIDEO</a>
&nbsp;
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#imgModal" data-itemsource="http://placehold.it/350">IMAGE</a>

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <div>
                    <iframe width="100%" height="350" src=""></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="imgModal" tabindex="-1" role="dialog" aria-labelledby="imgModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <div>
                    <img width="100%" height="auto" style="text-align:center; vertical-align:middle;" src="">
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript

autoLaunchMultiModal();

  //GET IMAGE FOR DISPLAY OR VIDEO FOR AUTOPLAY//
  function autoLaunchMultiModal() {
      var trigger = $("body").find('[data-toggle="modal"]');
      trigger.click(function () {
          var theModal = $(this).data("target"),
              itemSRC = $(this).attr("data-itemsource"),
              itemSRCauto = itemSRC + "?autoplay=1";
          if (theModal == "#videoModal") {
              $(theModal + ' iframe').attr('src', itemSRCauto);
              $(theModal).on('hidden.bs.modal', function () {
                  $(theModal + ' iframe').removeAttr('src');
              })
          } else {
              $(theModal + ' img').attr('src', itemSRC);
              $(theModal).on('hidden.bs.modal', function () {
                  $(theModal + ' img').removeAttr('src');
              });
          }
      });
  }