手机屏幕上进行视频全屏也

好了，所以我用下面的代码来显示一个巨型-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

来源

2017-04-18 Anudeep Gupta

你是否已经设置了'viewport'是否正确？没有它，视口和你的屏幕是不一样的。 –

@NiettheDarkAbsol –

您可以使用CSS样式

012迫使视频的配合

object-fit:fill

下方（resizble窗口，可以用代码）见片段

.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>

来源

2017-04-19 03:39:15 repzero

手机屏幕上进行视频全屏也

回答

相关问题