Question

我似乎无法解决我的移动超大型移动电话中的视频问题。在台式机上，我希望视频的高度为800px，但是在移动设备上，它占用屏幕的整个宽度和高度，并且失去了视频的长宽比，因此无法正确显示。我正在尝试对其进行更改，以使视频在台式机中显示800px，在移动设备中显示完整的宽高比。
有想法吗？这是我的代码：

    .jumbotron{
    position: relative;
    overflow: hidden;
    height: 800px;
    }

    #video-background{ 
    position: absolute;
    height: auto;
    width: auto;
    min-height: 100%;
    min-width: 100%;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 1;
  }

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="jumbotron">
        <video id="video-background" preload muted autoplay loop class="img img-responsive">
          <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        </video>
    </div>

在Bootstrap Jumbotron中显示视频在移动设备上无响应

0 个答案: