<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section > <div class="overlay-wcs"></div> <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop"> <source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4"> </video> <div class="container h-100"> <div class="d-flex h-100 text-center align-items-center"> <div class="w-100 text-white"> <h1>Web 影像显示</h1> <p class="lead mb-0">With HTML5 Video and Bootstrap 4</p> </div> </div> </div> </section>

section { position: relative; background-color: black; height: 75vh; min-height: 25rem; width: 100%; overflow: hidden; } section video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 0; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } section .container { position: relative; z-index: 2; } section .overlay-wcs { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: black; opacity: 0.5; z-index: 1; }