は、携帯電話の画面上でのビデオのフルスクリーンを作ることも

Question

わかりましたので、私はジャンボトロンのバックグラウンドでビデオを表示するには、次のコードを使用していますが、画面のシュリンク上の動画が応答しなくなるしないと空白に

<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スタイル

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>