h5 视频全屏-横屏实现，遇到问题以及解决方案

最近需要实现h5 视频全屏也就是横屏，横屏后需要将相关视频展现在侧边栏。考虑到h5是不能让手机强制横屏的，只能考虑用css 样式上横屏显示video

思路就是--利用position:fixed 定位，对于视频容器元素 transform 旋转90deg，容器的宽高调整为如下

position: fixed;
left: 0;
top: 0;
width: 100vmax;
height:100vmin;
transform-origin: top left;
transform: rotate(90deg) translateY(-100vmin);
z-index: 100000;

但是遇到一个问题，就是旋转后，video 与自己写的进度条和播放控件都会备视频遮盖，video的层级为最高，也试了单独对video旋转，不会有这种现象。只要是在父元素下transform 就会出现video 层级问题。后面百度后的 解决方案是

还是在父元素下transform，然后在播放控制条下加 transform: translateZ(100px),试了下没问题。

显示问题解决了，但还有一个问题，就是横屏后，在不同的手机浏览器上元素有部分会被遮挡，原因就是100vmax 可能不准确 会把底部和头部的距离算上。后面解决方案就是，用js 获取文档的高度和宽度进行赋值。

const w = document.body.clientWidth;
const h = document.body.clientHeight;
document.getElementsByClassName('player-fulled')[0].style.width = h + 'px';
document.getElementsByClassName('player-fulled')[0].style.height = w + 'px';

还需要处理若用户手机自己横屏后，去除我们自己写的横屏样式 

去除宽高的设定
document.getElementsByClassName('player-fulled')[0].removeAttribute('style');
样式上
transform: none;
width: 100% !important;
height: 100% !important;