如何解决适用于主板设备的自动风景模式播放器
我正在开发一个有角度的视频播放器。视频在大屏幕上看起来不错。但是当我在手机上打开相同的视频时,应该可以在横向模式下看到它。
我使用媒体查询添加了CSS,但是播放器不在屏幕外,有时无法填满整个屏幕。我对CSS有错吗?
Template.html
<app-chromeless-player
class="video-play-section1"
[video]="video"
[playerContainerClass]="'watch-theoplayer-container'"
[defaultStereo]="defaultMode === 'stereo' ? true : false"
[libraryLocation]="
'https://cdn.myth.theoplayer.com/aa9f2fae-a943-420c-bd08-273678f4c036'
"
[isVR]="video.is360 || video.is180"
[isFullVideo]="true"
[stereoMode]="video.playbackType ? video.playbackType : ''"
[isRated]="isRated"
>
</app-chromeless-player>
</ng-container>
style.css
@media screen and (max-width: 500px) and (orientation: portrait) {
.video-play-section1 {
transform: rotate(-90deg);
width: 100vh;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}```
[![output on thebig screen ][1]][1]
[![Output on small screen][2]][2]
[1]: https://i.stack.imgur.com/3Stfm.png
[2]: https://i.stack.imgur.com/LThAz.png
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。