レスポンシブビデオが予期したとおりに調整されない

Question

私の主な目標は達成されました。私は自分のページの上部にバックグラウンドビデオを持っていましたが、問題は今、ビデオを反応的にしたいのですが、間違ったやり方で、画面を小さくすると、ビデオが小さくなり、高さが上がるのではなく、ちょうど幅と高さが小さくなります。幅が小さくなり、高さが高くなります。ここで

は一例です：

現在の行動：私は必要なもの

：

私のhtmlコード：

<section class="custom content_section bg_fixed white_section bg2"> 
     <div class="embed-responsive embed-responsive-16by9"> 


      <div id="video_overlays"></div> 

      <div class="container vertical-center"> 
       <div id="over"> 
        <div class="title-wrapper main_title centered upper"> 
         <h2 id="video_title"><span class="line"></span>VIDEO TITLE</h2> 
        </div> 

        <div class="description4 centered"> 
         <p id="video_sub_title"><b>LOREM IPSUM A SIMPLE DESCRIPTION<br> 
Usability and simple deployment are the key words.</b></p> 

        </div> 
       </div> 
      </div> 
      <div id="player" width="100%" height="100%" style="z-index:-1"> 
      </div> 
     </div> 

    </section> 

Answer 1

ここで働い例です：

http://codepen.io/panchroma/pen/YVKNdr

は、あなたのビデオを保持するdivのための以下のスタイリングを試してみてください。重要な点は、min-heightとmin-widthを100％に設定し、transform：translateを使用して動画を中央に配置することです。

希望すると便利です。

CSS

#player { 
    position: fixed; 
    top: 50%; left: 50%; 
    z-index: -1; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    transform: translate(-50%, -50%); 
} 

Answer 2

この1

CSSを試してみてください

#videocontainer{ 
    position:absolute; 
    z-index:-1; 
    background:url(../the link to image when video uploads or not supported by browser.jpg) center center no-repeat; 
    background-size:cover; 
    width:100%; 
    height:100%; 
} 
.videobg { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    transform: translateX(-50%) translateY(-50%); 
    background-size: cover; 
    transition: 1s opacity; 
    z-index: 1; 
} 

あなたのHTML

<div class="videocontainer> 
    <video class="videobg" controls autoplay loop id=player poster="http://the link to image when video uploads or not supported by browser" > 
     <source src="link to your mp4 video file.mp4" type="video/mp4" > 
    </video> 
</div>