Question

所以我正在使用Bootstrap 4从youtube播放视频（在模式下，通过按钮触发）。

问题是：如果我重新调整网页窗口的大小，则模式是令人反感的，但其中播放的视频却不是。

我尝试使用jQuery或媒体查询来解决此问题，但未能使其正常运行。

是否有一种有效且简单的方法来做到这一点？

这是我的代码：

<!-- Video Play -->
  <section id="video-play">
    <div class="dark-overlay">
      <div class="row">
        <div class="col">
          <div class="container p-5">
            <a href="" class="video" data-toggle="modal" data-target="#videoModal" data-video="https://www.youtube.com/embed/id-video">
              <i class="fas fa-play fa-3x"></i>
            </a>
            <h1>See What We Do</h1>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Video MODAL -->
  <div id="videoModal" class="modal fade">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-body">
          <button class="close" data-dismiss="modal">
            <span>&times;</span>
          </button>
          <iframe src="" frameborder="0" height="765" width="765" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>

基本上，我要做的是使iframe广告代码的高度和宽度反映设备的屏幕尺寸（或者可以说是响应式的）。

关于如何实现这一目标的任何想法？

提前感谢您的时间和帮助！

马可

Answer 1

由于您使用的是引导程序，因此可以通过使用embed-response类来做到这一点，但是很难说没有codepen来引用。

查看此链接：https://getbootstrap.com/docs/4.1/utilities/embed/

在模态响应中制作视频-Bootstrap 4

1 个答案: