Сделайте видео подходящим на 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 код:

<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

По вашему CSS я полагаю, ваш 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 o е 100%

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