使视频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>

如果我的假设是正确的，您所要做的就是给视频一个 100% 的width

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