2017-05-30 4 views
-2

私は現在、店舗広告のために1ページの動画を再生しています。ビデオタグを親divとの相対的な高さに設定するにはどうすればよいですか?

私の問題は、どのようにビデオタグを親divとの相対的な高さに設定できますか?私はvhディメンションを使用しましたが、まだそれを解決する運がありません。

画像上に見られるように、ビデオ部分には上下に隙間があります。すでに0 enter image description here

コードにパディングとマージンを設定します。

<!DOCTYPE html> 
 
<!-- http://www.101computing.net/html-website-layout/ --> 
 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
 
<style> 
 
    BODY { 
 
    background-color: #FFF; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    margin: 0px; 
 
    } 
 

 
    .page { 
 
    display: block; 
 
    width: 100%; 
 
    min-height: 800px; 
 
    overflow: auto; 
 
    margin: 0px auto 0px auto; 
 
    box-sizing: border-box; 
 
    } 
 

 
    .pageClockPanel { 
 
    background-color: #333; 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    clear: none; 
 
    width: 60%; 
 
    height: 10%; 
 
    padding: 10px; 
 
    } 
 

 
    .pageRightPanel { 
 
    background-color: #1A237E; 
 
    position: fixed; 
 
    top: 0px; 
 
    right: 0px; 
 
    clear: none; 
 
    width: 40%; 
 
    height: 87%; 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
    } 
 

 
    .pageLeftPanel { 
 
    background-color: #E64A19; 
 
    position: fixed; 
 
    top: 10%; 
 
    left: 0px; 
 
    clear: none; 
 
    width: 60%; 
 
    height: 77%; 
 
    box-sizing: border-box; 
 
    padding: 0px; 
 
    } 
 

 
    .pageBottomPanel { 
 
    background-color: #333; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    right: 0px; 
 
    clear: none; 
 
    height: 13%; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
    } 
 

 

 
    .item img { 
 
    width: 100%; 
 
    min-height: 77vh 
 
    } 
 

 
    .item video, 
 
    source { 
 
    width: 100%; 
 
    min-height: 77vh; 
 
    } 
 
</style> 
 

 
<title>Page Title</title> 
 
<!-- https://www.bootply.com/59900 --> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
</head> 
 

 
<body> 
 
    <div class="page"> 
 
    <div class="pageClockPanel"> 
 

 
    </div> 
 
    <div class="pageRightPanel"> 
 

 
    </div> 
 
    <div class="pageLeftPanel"> 
 
     <div class="row"> 
 
     <div class="col-md-12"> 
 

 
      <div class="item"> 
 
      <video video autobuffer autoplay> 
 
    \t \t \t \t \t <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
 
    \t \t \t \t \t </video> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="pageBottomPanel"> 
 

 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

+0

可能な複製(HTTPS [フル高さのビデオを作成する方法] :/ /stackoverflow.com/questions/30612353/how-to-make-video-with-full-height) – Rob

+0

ありがとうございますが、私は必要な方法で動作しません。 – iamcoder

答えて

0

videoタグのheight属性を設定しようとすることができます

.item{ 
    position:absolute; 
    height:100%; 
    width:100%; 
    overflow: hidden; 
} 

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

css explanation here

0

videoタグは、常にビデオファイルと同じ比(幅/高さ)を取得します。
幅と高さに合わせたい場合は伸ばしたように見えます。
私はこのCSSを追加することによって、私の問題を解決し

関連する問題