<div class="modal-body"
    ng-swipe-left="Lightbox.nextImage()"
    ng-swipe-right="Lightbox.prevImage()">


    <div class="lightbox-image-caption">
      <span >{{Lightbox.imageCaption}}</span>
    </div>
    <div class="lightbox-nav">
      <!-- caption -->

      <!-- close button -->
      <button class="close" aria-hidden="true" ng-click="$dismiss()">×</button>
    </div>

  <div class="lightbox-image-container">

    <!-- image -->
    <img ng-if="!Lightbox.isVideo(Lightbox.image)"
        lightbox-src="{{Lightbox.imageUrl}}">

    <!-- video -->
    <div ng-if="Lightbox.isVideo(Lightbox.image)"
        class="embed-responsive embed-responsive-16by9">
      <!-- video file embedded directly -->
      <video ng-if="!Lightbox.isSharedVideo(Lightbox.image)"
          lightbox-src="{{Lightbox.imageUrl}}"
          controls
          autoplay="true">
      </video>

      <!-- video embedded with an external service using
           `ng-videosharing-embed` -->
      <embed-video ng-if="Lightbox.isSharedVideo(Lightbox.image)"
          lightbox-src="{{Lightbox.imageUrl}}"
          ng-href="{{Lightbox.imageUrl}}"
          iframe-id="lightbox-video"
          class="embed-responsive-item">
        <a ng-href="{{Lightbox.imageUrl}}">Watch video</a>
      </embed-video>

    </div>
  </div>


</div>