ymnj
11/15/2017 - 12:04 AM

Video Modal

Pop up video Modal

<div class="row">
<div class="col-sm-12"><a data-target="#videoModal" data-thevideo="https://player.vimeo.com/video/113972768" data-toggle="modal" href="#"><img class="img-responsive" src="/sites/default/files/users/richardboehm/images/your-goal-comes-first.jpg" /></a></div>

<div class="col-sm-12">
<a data-target="#videoModal" data-thevideo="https://player.vimeo.com/video/109841450" data-toggle="modal" href="#"><img class="img-responsive" src="/sites/default/files/users/richardboehm/images/estate-planning.jpg" /></a></div>

<div class="col-sm-12">
<a data-target="#videoModal" data-thevideo="https://player.vimeo.com/video/109841452" data-toggle="modal" href="#"><img class="img-responsive" src="/sites/default/files/users/richardboehm/images/financial-planning.jpg" /></a></div>

<div class="col-sm-12">
<a data-target="#videoModal" data-thevideo="https://player.vimeo.com/video/116184496" data-toggle="modal" href="#"><img class="img-responsive" src="/sites/default/files/users/richardboehm/images/401K-rollover.jpg" /></a></div>

<div class="col-sm-12">
<a data-target="#videoModal" data-thevideo="https://player.vimeo.com/video/109841113" data-toggle="modal" href="#"><img class="img-responsive" src="/sites/default/files/users/richardboehm/images/retirement.jpg" /></a></div>

<div class="col-sm-12">
<a data-target="#videoModal" data-thevideo="https://player.vimeo.com/video/109841114" data-toggle="modal" href="#"><img class="img-responsive" src="/sites/default/files/users/richardboehm/images/retirement-income-planning.jpg" /></a></div>

<!-- Youtube  -->
<div class="col-sm-12">
<a data-target="#videoModal" data-thevideo="https://www.youtube.com/embed/R-fvMMaEP9k" data-toggle="modal" href="#"><img class="img-responsive" src="/sites/default/files/users/richardboehm/images/chartered.jpg" /></a></div>

<div class="col-sm-12">
<a data-target="#videoModal" data-thevideo="https://www.youtube.com/embed/mQIv_CrCqo0" data-toggle="modal" href="#"><img class="img-responsive" src="/sites/default/files/users/richardboehm/images/august.jpg" /></a></div>

<div class="col-sm-12">
<a data-target="#videoModal" data-thevideo="https://www.youtube.com/embed/DBFP3jHchz0" data-toggle="modal" href="#"><img class="img-responsive" src="/sites/default/files/users/richardboehm/images/hidden.jpg" /></a></div>

<div class="col-sm-12">
<a data-target="#videoModal" data-thevideo="https://www.youtube.com/embed/WAAQaQnQ0IM" data-toggle="modal" href="#"><img class="img-responsive" src="/sites/default/files/users/richardboehm/images/unified.jpg" /></a></div>


</div>
<!-- // ROW -->

<div aria-hidden="true" aria-labelledby="videoModal" class="modal fade" data-backdrop="true" id="videoModal" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body"><button aria-hidden="true" class="close" data-dismiss="modal" type="button">&times;</button>

<div>
<div class="iframeWrapper"><iframe height="350" src="" width="100%"></iframe></div>
</div>
</div>
</div>
</div>
</div>

<script>

$( document ).ready(function() {


  autoPlayYouTubeModal();

  //FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
  function autoPlayYouTubeModal() {
      var trigger = $("body").find('[data-toggle="modal"]');
      trigger.click(function () {
          var theModal = $(this).data("target"),
              videoSRC = $(this).attr("data-theVideo"),
              videoSRCauto = videoSRC + "?autoplay=1";
          $(theModal + ' iframe').attr('src', videoSRCauto);
          $(theModal + ' button.close').click(function () {
              $(theModal + ' iframe').attr('src', videoSRC);
          });
      });
    $('#videoModal').on('hidden.bs.modal', function (e) {
      $('#videoModal .close').trigger('click')
      })
  }

}); 

</script>
<div class="row">
  <div class="col-sm-12">

  <a href="#" data-toggle="modal" data-target="#videoModal1">
  <p class="text-center video-title">Global Planning specializes in Executive & Entrepreneur Private Wealth</p>

  <img class="img-responsive" src="/sites/default/files/users/globalplanning2/images/play-video.png"></a>

  <!-- Modal -->
  <div class="modal fade" id="videoModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" 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">&times;</span></button>
        </div>
        <div class="modal-body">
          <div class="iframeWrapper"><iframe allowfullscreen="" frameborder="0" height="225" src="https://www.youtube.com/embed/z_xoBq-rjoQ?rel=0&autoplay=1 " width="400"></iframe></div>
        </div>
      </div>
    </div>
  </div>
  </div>

  <div class="col-sm-12">
    <a href="#" data-toggle="modal" data-target="#videoModal1">
    <p class="text-center video-title">Global Planning specializes in Executive & Entrepreneur Private Wealth</p>

    <img class="img-responsive" src="/sites/default/files/users/globalplanning2/images/play-video.png"></a>

    <!-- Modal -->
    <div class="modal fade" id="videoModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" 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">&times;</span></button>
          </div>
          <div class="modal-body">
            <div class="iframeWrapper"><iframe allowfullscreen="" frameborder="0" height="225" src="https://www.youtube.com/embed/z_xoBq-rjoQ?rel=0&autoplay=1 " width="400"></iframe></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>