html - Bootstrap modal youtube iframe 黑色边框问题

Question

我一直在尝试制作一个 youtube 视频，该视频将以基于引导程序的模式显示。
但是每次我尝试设置宽度和高度只是黑条没有出现时，当我在台式机和智能手机上播放视频时，它总是设法显示一些黑条。在 safari 中，黑条变得比 Chrome 中显示的更大。我在下面编写的代码能够使模态在屏幕上居中并进行一些大小调整。

你们对这个问题有一些经验和解决方法吗？

HTML

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal Window -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-center">
        <div class="modal-content">
            <iframe width="100%" height="100%" class="yt_video" src="https://www.youtube.com/embed/84TJJMfZKmk?autoplay=1&loop=1&playlist=84TJJMfZKmk"></iframe>
        </div>
    </div>
</div>

Custom CSS that I made

      .modal-dialog{
        max-width: 70vw;
      }
      .modal-dialog-center {
        padding-top: 5%;
      }
      .yt_video{
        height: 78vh
      }

      @media screen and (max-width: 750px) {
        .modal-dialog {
          max-width: 100vw;
          max-height: 100vh;
        }
        .modal-dialog-center {
          padding-top: 50%;
        }
        .yt_video{
          height: 31vh;
        }
      }

标签： htmlcssbootstrap-4