Bootstrap 4 BG 视频到全屏模式答案

【问题标题】：Bootstrap 4 BG video to full screen ModalBootstrap 4 BG 视频到全屏模式
【发布时间】：2018-09-18 23:24:49
【问题描述】：

正在构建 Bootstrap 4 网站，我在登录页面上有一个全屏 BG 视频，带有“播放”按钮。当用户单击播放时，我希望模态为全屏。现在，当模态打开时它非常小。我尝试使用 bs-modal-fullscreen 插件，但似乎没有解决问题。任何建议或任何人都知道解决方案？？？谢谢！

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<section class="vid p-5">
  <div class="video-container h-100">
    <video class="bg-video" autoplay muted loop>
              <source src="video/people.mp4" type="video/mp4">
              Your browser is not supported
            </video>
  </div>
  <div class="row h-100 justify-content-center align-items-center text-center text-white">
    <div class="col m-4">
      <h1 class="display-4 banner-heading">
        "We Believe People Make The Difference"
      </h1>
      <p class="lead banner-par">Since 2004</p>
      <a href="#" class="launch-modal" data-modal-id="modal-video">
        <span class="video-link-icon"><i class="fa fa-play-circle"></i></span>
      </a>
    </div>
  </div>
</section>
<!-- MODAL -->
<div class="modal fade" id="modal-video" tabindex="-1" role="dialog" aria-labelledby="modal-video-label">
  <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="modal-video">
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="video/people.mp4" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： jquery html css twitter-bootstrap bootstrap-modal

【解决方案1】：

首先，你应该编写全屏风格的代码。然后，您应该为单击事件编写 js 代码并添加 modal-dialog 新类。您可以检查示例

.fullscreen{
  width: 100%;
  height: 100%;
  padding: 0;
}

<script type="text/javascript">
    function addClass(){
        document.getElementById("MyElement").classList.add('fullscreen');
    }
</script>
...
<button onclick="addClass()">ClickEvent/button>

【讨论】：