フルハイトの分割画面ビデオを作成するには？

私が取り組んでいるウェブページ上でこの分割スクリーンビデオエフェクトを達成したいと思います。 Here is a picture of the result I have so far フルハイトの分割画面ビデオを作成するには？

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>NextDoor Pub&amp;Grill</title> 
     <link href="css/reset.css" rel="stylesheet" type="text/css" /> 
     <link href="css/styles.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
     <header> 
      <div class="header__menu full-width"> 

      </div> 
     </header> 
     <nav> 
      <div class="nav flex full-width"> 
       <div class="nav__video flex full-width"> 
        <div id="left"> 
         <div class="nav__video--left" onclick="expandRight()"> 
          <video playsinline autoplay muted loop> 
          <!--- Inlcude the video files with .webm file first ---> 
           <source src="assets/videoLeft/loop.webm"> 
           <source src="assets/videoLeft/loop.mp4"> 
           <source src="assets/videoLeft/loop.mov"> 
          </video> 
         </div> 
        </div> 
        <div id="right"> 
         <div class="nav__video--right" onclick="expandLeft()"> 
          <video playsinline autoplay muted loop> 
          <!--- Inlcude the video files with .webm file first ---> 
           <source src="assets/videoRight/loop.webm"> 
           <source src="assets/videoRight/loop.mp4"> 
           <source src="assets/videoRight/loop.mov"> 
          </video> 
         </div> 
        </div> 
       </div> 
      </div> 
     </nav> 
     <script src="js/scripts.js"></script> 
    </body> 
</html>

はCSS：

.skin{ 

    } 

    .full-width{ 
     width: 100%; 
    } 

    .flex{ 
     display: -webkit-flex; 
     display: flex; 
    } 

    .nav{ 
     position: absolute; 
     -webkit-flex-direction: column; 
     flex-direction: column; 
     height: 100%; 
    } 

    .header__menu{ 
     height: 100px; 
     background-color: rgba(0,0,255,0.5); 
    } 

    .nav__video{ 
     -webkit-flex-direction: row; 
     flex-direction: row; 
     -webkit-align-items: center; 
     align-items: center; 
     -webkit-justify-content: center; 
     justify-content: center; 
     height: 100%; 
    } 

    #left{ 
     width: 50%; 
     height: inherit; 
     object-fit: cover; 
    } 

    #right{ 
     width: 50%; 
     height: inherit; 
     object-fit: cover; 
    } 

    .nav__video--left{ 

    } 

    .nav__video--right{ 

    } 

    video{ 
     height: 100%; 
     width: 100%; 
     object-fit: contain; 
    } 

}

そうは、上記のコードによって示されるように、ビデオがでているのdivは、トップメニュー下の完全な高さを占有するような大きさバー。ただし、動画はそれぞれのdivの上部にのみ表示されます。同じアスペクト比を維持しながらビデオが完全な空白を占めることを確認するにはどうすればよいですか？

出典

2016-11-25 S. Miller

しばらくお待ちください。thisは、バナーを考慮してカバー効果とフルハイトの両方を与える正しいCSSの組み合わせであるようです。

height: calc(100vh - 100px);は、ヘッダーの高さを引いた値を返します。残りの部分は、主にheightとを要素ツリー全体に渡しているため、videoのサイズは正しいサイズになります。

IEはobject-sizeをサポートしていないことに注意してください。それがなければ、この効果はJavaScriptの助けを借りてのみ達成できます。

.full-width{ 
    width: 100%; 
} 

.flex{ 
    display: -webkit-flex; 
    display: flex; 
} 

.nav{ 
    position: absolute; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
    height: calc(100vh - 100px); 
} 

.header__menu{ 
    height: 100px; 
    background-color: rgba(0,0,255,0.5); 
} 

.nav__video{ 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    -webkit-align-items: center; 
    align-items: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
    height:100%; 

} 

#left, #right { 
    width: 50%; 
    height: 100%; 
} 

#left{ 
    background-color: green; 
} 

#right{ 
    background-color: yellow; 

} 

.nav__video--left, .nav__video--right{ 
    width: 100%; 
    height: 100%; 
    overflow:hidden; 
} 

.nav__video--left{ 
    background-color: blue; 
} 

.nav__video--right{ 
    background-color: red; 
} 

video{ 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

出典

2016-11-26 00:57:53 Ouroborus

が

video { 
    width: auto; 
    min-width: 100%; 
    height: auto; 
    min-height: 100%; 
}

または

video { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    top: 0; 
    right: 0; 
    width: 100%; 
    height: 100vh; 
}

出典

2016-11-26 00:22:28

Hereを試してみてください（各映像の一部がカットされますが）、私は願って作業フィドルは、あなたが探していたものと一致しています。

.nav__video--left{ 
    background-color: blue; 
    background-size: cover; 
} 

.nav__video--right{ 
background-color: red; 
} 

video{ 
    object-fit: cover; 
    min-height: 100vh; 
    min-width: 100%; 
    overflow: hidden; 
}

私はビデオはdiv要素の外に広がる映像の一部を非表示にするには、全体のdivとoverflow:hidden;を埋める埋めるのでobject-fit: coverを、その後を設定しています。

出典

2016-11-26 00:28:48 A1raa

IEはこれをサポートしていますが、少なくとも最新のバージョンとそれ以前のものは1％で使用されています。あなたは苦労して、100％のブラウザカバレッジを得るのにかなりの時間を犠牲にするでしょう。あなたはFFの問題を回避する方法があると確信しています。時間があれば、私はあなたを探します。 – A1raa

ここで助けを感謝する男、ありがとう！ –

フルハイトの分割画面ビデオを作成するには？

答えて

関連する問題