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看起来像这样：

＆＃13;

    <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>

＆＃13;

如果我的假设是正确的，那么您只需要为视频提供width 100％

＆＃13;

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

＆＃13;

使用任何选择的屏幕分辨率使视频适合100％

2 个答案: