iFrame和bootstrap模态

时间:2018-04-20 13:05:21

标签: javascript bootstrap-4 bootstrap-modal

我想知道是否有可能在页面上的iframe中播放视频时,如果用户滚动浏览该视频以打开内置该视频的模式并跟随用户在页面上滚动?

JS:

    $(function() {
  $(".video").click(function () {
    var theModal = $(this).data("target"),
      videoSRC = $(this).attr("data-video"),
      videoSRCauto = videoSRC;
    $(theModal + ' iframe').attr('src', videoSRCauto);
    $(theModal + ' button.close').click(function () {
      $(theModal + ' iframe').attr('src', '');
    });
  });
});

$(function() {
  $(".video").click(function () {
    var theModal = $(this).data("target"),
      videoSRC = $(this).attr("data-video"),
      videoSRCauto = videoSRC;
    $(theModal + ' iframe').attr('src', videoSRCauto);
    $(theModal + ' button.close').click(function () {
      $(theModal + ' iframe').attr('src', '');
    });
  });
});

HTML:

<button class="btn btn-success btn-lg video" data-video="https://www.youtube.com/embed/lZX8jeTvxOY"
                  data-toggle="modal" data-backdrop="" data-target="#videoModal">Play Video 1
          </button>

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                  <div class="modal-content">
                    <div class="modal-body">
                      <div class="embed-responsive embed-responsive-16by9">
                        <iframe width="100%" height="500" src="" frameborder="0" allowfullscreen></iframe>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

0 个答案:

没有答案