手機屏幕上進行視頻全屏也

好了，所以我用下面的代碼來顯示一個巨型-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

手機屏幕上進行視頻全屏也

回答

相關問題