Question

好吧我正在使用以下代码在jumbo-tron的背景中显示视频，但屏幕缩小的视频没有响应并显示空白

<div class="row">
    <div class="videoBgWrapper">
    <video loop muted autoplay poster="assets/images/video.mp4" class="videoBg">

        <source src="assets/images/video.mp4" type="video/mp4">

    </video>
</div>

css如下：

  .videoBg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    @media (min-aspect-ratio: 16/9) {
      .videoBg{
        width: 100%;
        height: auto;
      }
    }
    @media (max-aspect-ratio: 16/9) {
      .videoBg {
        width: auto;
        height: 100%;
      }
    }

但即使在手机或iPad上，如何才能实现全屏尺寸

Answer 1

您可以使用css样式强制适合视频

  object-fit:fill

请参阅下面的代码段（在可撤消窗口中使用代码）

  .videoBg{
        position:absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    @media (min-aspect-ratio: 16/9) {
      .videoBg{
       
        width: 100%;
        height: auto;
      }
    }
    @media (max-aspect-ratio: 16/9) {
      .videoBg {
       
       width:100%; 
        height: 100%;

        padding:0
      }
    }
body{
  border:solid red;
}
video{
  object-fit:fill

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
    <div class="videoBgWrapper">
    <video loop muted autoplay poster="assets/images/video.mp4" class="videoBg">

        <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">

    </video>
</div>

也可以在手机屏幕上制作全屏视频

1 个答案: