Question

正在构建Bootstrap 4网站，我在登录页面上有一个带有“播放”按钮的全屏BG视频。我希望用户单击播放时的模式为FULLSCREEN。现在，当模式打开时，它很小。我尝试使用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>

Answer 1

首先，您应该编写fullscrenn样式代码。然后，您应该为click事件编写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>

将4 BG视频引导到全屏模式

1 个答案: