「css」<video>全屏播放视频

很多时候，ui提供出来的视频都只有固定尺寸的，ios还好，会自动全屏播放（虽然有蒙层空白），但是在安卓机上又要面临复杂的机型尺寸，又不能自动全屏播放，就需要对视频的尺寸进行手动适配了。
基本上，可以总结为两种方案：

1. 裁剪视频尺寸，使高度切合屏幕
2. 设定空余空间，使宽度切合屏幕

裁剪视频尺寸，使高度切合屏幕

设置一个顶天立地的父层在后面，overflow设为hidden；video设定height为100%，宽度不进行设置，然后用absolute水平居中。
但是对于这种情况，我有一个疑问，测下来发现视频的实际宽度并没有发生变化，这导致系统自带的control会显示不全。难道只有完全不通过系统control而是单纯用js播放才能解决这个问题吗？

video {
    margin: 0 auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    display: block;
}

<div style="position: fixed;top:0;right: 0;bottom: 0;left: 0;overflow: hidden;">
    <video src="./course-video.mp4" controls></video>
</div>

设定空余空间，使宽度切合屏幕（现用）

设置一个顶天立地的父层在后面，video设定max-width为100%，高度为90%（100%太不切合了，没必要），然后垂直居中。

video {
    margin: 0 auto;
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateY(-50%);
    max-width: 100%;
    height: 90%;
    display: block;
}

<div style="position: fixed;top:0;right: 0;bottom: 0;left: 0;">
    <video src="./course-video.mp4" controls></video>
</div>