選択した画面解像度でビデオを100％フィットさせる

Question

私のアプリケーションに問題があります。私の画面解像度を変更するたびに、私のビデオは、画面の中央の位置からずれるようになります。他の解像度に変更しても、同じ場所にビデオを残す方法に関する提案はありますか？

.fullscreen-bg { 
position: fixed; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0;} 

.fullscreen-bg_video { 
    position: absolute; 
    border: 6px solid; 
    padding: 8.5px; 
    background: #dddddd; 
     border-top-left-radius: 1em; 
     border-top-right-radius: 1em; 
     border-bottom-left-radius: 1em; 
     border-bottom-right-radius: 1em; 
    border-style: solid; 
    top: 50%; 
    left: 50%; 
    width: auto; 
    height: auto; 
    transform: translate(-50%, -50%); 
} 

Answer 1

htmlコード：あなたのCSSによると

<md-list flex class="side-actions"> 
     <md-list-item ng-repeat="action in $ctrl.sideActions" ng-click="action.callback()"> 
      <md-icon md-svg-src="{{ action.icon }}" aria-label="{{ action.display }}"></md-icon> 
      <span flex>{{ action.display }}</span> 
     </md-list-item> 
     <div class="fullscreen-bg" style="visibility:hidden" id="video_div"> 
     <video class="fullscreen-bg_video" id="video" controls> 
      <source id="videoSrc" type="video/mp4"> {{$ctrl.videoSrc}} 
     </video> 

     <span> 
      <md-button flex-offset="45" flex="5" class="close" id="closeButton" ng-click="$ctrl.closeVideo()"> 
       <md-icon class="control in-line s-24" md-svg-src="app/assets/icon_remove.svg"></md-icon> 
       <span>Close</span> 
      </md-button> 
     </span> 

    </div> 
    </md-list> 

Answer 2

私はあなたのHTMLを仮定は次のようになります。

<div class="fullscreen-bg"> 
 
     <div class="fullscreen-bg_video"> 
 
      <video width="320" height="240" controls> 
 
       <source src="movie.mp4" type="video/mp4"> 
 
       <source src="movie.ogg" type="video/ogg"> 
 
       Your browser does not support the video tag. 
 
      </video> 
 
     </div> 
 
    </div>

私の仮定はすべて、正しい場合あなたはビデオを与えることをしなければならないwidth F 100％

.fullscreen-bg .fullscreen-bg-video video{ 
 
    width:100% 
 
    height:auto; 
 
}